滚动修改导航栏背景色JS问题：整栏样式不生效且出现JS报错

问题原因 #

导航栏样式不生效 #

你当前是给导航的父容器#para添加test类的黄色背景，但导航元素自身的.header类已经明确设置了背景色，子元素设置的背景会覆盖父元素的背景，因此父元素的黄色背景被遮挡无法显示。

平台JS报错 #

你的代码使用了jQuery语法，运行平台未提前引入jQuery依赖，因此会抛出$ is not defined类的错误，你本地环境引入了jQuery所以运行正常。

解决方案 #

1. 修改CSS优先级 #

调整CSS选择器，父元素携带test类时直接覆盖导航自身的背景样式：

/* 替换原来的.test类样式 */
.test .header {
  background-color: yellow;
}

2. 替换JS为原生写法（解决平台报错，无需依赖jQuery） #

直接删除原有jQuery代码，替换为以下纯原生JS代码：

document.addEventListener('DOMContentLoaded', function() {
  const navWrap = document.getElementById('para');
  window.addEventListener('scroll', function() {
    if (window.scrollY > 50) {
      navWrap.classList.add('test');
    } else {
      navWrap.classList.remove('test');
    }
  });
});

修改完成后滚动页面即可看到导航栏背景色正常切换。

内容的提问来源于stack exchange，提问作者Eugene