设置渐变背景时Navbar滚动变色效果失效如何解决

实现的初始渐变Navbar效果参考：

问题根源 #

效果不触发是CSS选择器优先级冲突导致的：你给#header这个ID选择器写了渐变背景，ID选择器的权重（100）远高于类选择器的权重（10），所以JS动态加上的.headerr__black类里的纯黑背景，根本覆盖不了ID选择器里预设的渐变样式，自然看不到切换效果。

修复方法 #

两种方案任选其一即可，不需要改动现有JS逻辑：

• 方案一：直接提高黑色样式的优先级
  把你原来写的.headerr__black样式替换成下面的代码，让选择器同时匹配ID和类，权重足够覆盖原有渐变：

  #header.headerr__black {
    background: #121212;
    /* 可选：加过渡动画让切换更顺滑，不会太生硬 */
    transition: background 0.3s ease;
  }
  

• 方案二：调整样式挂载的选择器，从根源避免优先级问题
  把原本写在#header里的渐变背景，移到和元素绑定的.headerr类上，两个状态都用类选择器控制，后续维护不会出优先级冲突：

  /* 先把#header里的两行background渐变代码删掉，新增下面两个类样式 */
  .headerr {
    background: linear-gradient(180deg, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0) 57%);
    transition: background 0.3s ease;
  }
  .headerr.headerr__black {
    background: #121212;
  }
  

补充说明 #

你原来渐变代码里写的rgba(9,9,121,0)是透明度为0的深蓝色，因为完全透明视觉上和纯透明没区别，不影响显示，如果想代码更严谨可以改成rgba(0,0,0,0)，贴合整体黑色主题。

改完之后滚动页面超过100px时，Navbar就会正常切换为纯黑色，回到顶部自动恢复渐变效果。

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