固定透明导航栏滚动变色失效问题求助

你的代码逻辑没问题，但背景颜色没变化大概率是CSS优先级或样式覆盖的问题，下面是具体排查和解决方法：

1. 提升CSS选择器权重 #

如果原.navbar的background-color样式选择器权重比.navbar-scrolled高，就会覆盖新样式。比如原样式是header .navbar或者带ID的选择器，权重更高。

把.navbar-scrolled的选择器改成带原类名的组合，提升权重：

.navbar.navbar-scrolled {
    background-color: #fff;
    color: #000;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

2. 排查!important声明 #

如果原.navbar样式里写了background-color: transparent !important;，普通的.navbar-scrolled样式会被忽略。

解决方式二选一：

• 删掉原样式里的!important（推荐）
• 给.navbar-scrolled的background-color也加上!important（应急用）：

.navbar-scrolled {
    background-color: #fff !important;
    color: #000;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

3. 验证JS是否正确添加类 #

打开浏览器控制台（F12），滚动页面后查看Navbar元素的类列表，确认navbar-scrolled是否被正确添加/移除：

• 如果没添加，检查页面是否有多个.navbar元素，querySelector只选取了第一个，可能选错了目标元素
• 调整滚动阈值56，比如改成window.scrollY > 0测试，看是否触发类的切换

4. 排除其他样式干扰 #

检查Navbar是否有background-image、opacity属性，或者父元素背景是否透过Navbar显示，这些都可能导致背景颜色看起来没变化。确保.navbar-scrolled的background-color能正常覆盖原有样式。

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