导航栏滚动时从透明变彩色失效原因及修复方案

失效原因 #

• 类名不匹配：JS里给导航栏添加的是scrolled类，但CSS中定义的样式类是.bg-dark-scrolled，两者无关联，导致滚动时添加的类无法触发样式变化。
• 脚本加载顺序错误：jQuery脚本在Bootstrap JS之后加载，此时$对象还未被定义，绑定的滚动事件无法执行。
• 样式优先级冲突：原bg-dark类用!important强制设置透明背景，若切换后的样式优先级不足，无法覆盖原有样式。

修复后的完整代码 #

HTML #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

<nav class="container navbar navbar-expand-lg bg-dark pt-4 fixed-top">
  <!-- 导航栏内容示例 -->
  <a class="navbar-brand" href="#">导航栏</a>
</nav>

<!-- 先加载jQuery，再加载Bootstrap JS，顺序不可颠倒 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<script>
$(window).scroll(function(){
  $('nav').toggleClass("scrolled", $(this).scrollTop()>50);
})
</script>

CSS #

body{
  height:2000px;
  margin-top: 80px; /* 避免内容被固定导航栏遮挡 */
}

/* 初始透明背景 */
.bg-dark{
  background: transparent !important;
  transition: background-color 0.3s ease; /* 添加过渡动画，让切换更平滑 */
}

/* 滚动后的背景样式，与JS中的scrolled类对应 */
.bg-dark.scrolled{
  background-color: rgba(15, 14, 14, 0.838) !important;
}

核心修复说明 #

1. 类名关联修正：将CSS中的.bg-dark-scrolled改为.bg-dark.scrolled，让导航栏同时拥有bg-dark和scrolled类时触发样式，与JS逻辑匹配。
2. 脚本顺序调整：jQuery必须在Bootstrap JS之前加载，确保$对象初始化完成后再执行滚动事件绑定。
3. 样式优化：用复合选择器提升新样式优先级，确保能覆盖原有bg-dark的样式；添加过渡动画让背景切换更自然；给body设置margin-top避免内容被固定导航栏遮挡。

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