如何用jQuery在Bootstrap中实现滚动时修改navbar-brand字体颜色？

嘿，我完全懂你遇到的困扰——Bootstrap的默认样式优先级经常会让我们自定义的样式被悄咪咪覆盖掉！不过别担心，咱们只需要调整CSS选择器的优先级，就能轻松实现滚动时修改navbar-brand字体颜色的效果。

问题根源 #

Bootstrap自带的.navbar-default .navbar-brand选择器优先级比你当前尝试的.scroll .navbar-brand要高，所以即使你给导航栏加上了scroll类，自定义的颜色样式也会被默认样式压下去。

解决方案：提升选择器优先级 #

我们只需要把自定义样式的选择器改成和Bootstrap默认选择器权重一致（甚至更高），并且确保你的自定义CSS在Bootstrap CSS之后加载，就能顺利覆盖默认样式了。

修改后的完整代码：

1. CSS部分（新增品牌文字颜色的样式）

.navbar-default{ 
  background-color: transparent; 
  border:none; 
  transition: 0.2s;
} 

.navbar-default.scroll{ 
  background: #0A090C; 
  transition: 0.2s; 
  -webkit-box-shadow: 0px 2px 15px 1px rgba(15,15,15,1); 
  -moz-box-shadow: 0px 2px 15px 1px rgba(15,15,15,1); 
  box-shadow: 0px 2px 15px 1px rgba(15,15,15,1);
}

/* 初始状态的品牌文字颜色 */
.navbar-default .navbar-brand {
  color: #ffffff; /* 替换成你初始的字体颜色 */
  transition: color 0.2s ease; /* 添加过渡动画，让颜色变化更平滑 */
}

/* 滚动后的品牌文字颜色 */
.navbar-default.scroll .navbar-brand {
  color: #ffcc00; /* 替换成你滚动后想要的字体颜色 */
}

2. jQuery部分（无需修改，保持原代码即可）

$(window).scroll(function(){ 
  if($(window).width()<= 750){ 
    $('nav').toggleClass('scroll', $(this).scrollTop() > 300); 
  } else{ 
    $('nav').toggleClass('scroll', $(this).scrollTop() >600); 
  }
});

3. HTML部分（无需修改）

<nav class="navbar navbar-default navbar-fixed-top ">
  <div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" class="anim_button"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Sandro Kekelia</a> 
  </div> 
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Link <span class="sr-only">(current) </span></a></li> 
      <li><a href="#">Link</a></li> 
    </ul> 
  </div>
</nav>

关键提醒 #

一定要确保你的自定义CSS文件是在Bootstrap的CSS文件之后引入的，这样你的样式才能正确覆盖Bootstrap的默认样式。

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