Question

我设法改变背景颜色，但是知道bootstrap的特殊性我很难弄清楚如何在导航栏中更改字体颜色（navbar-brand）

Jquery的：

$(window).scroll(function(){


if($(window).width()<= 750){

    $('nav').toggleClass('scroll', $(this).scrollTop() > 300);
}

else{
    $('nav').toggleClass('scroll', $(this).scrollTop() >600);
}

}）;

CSS：

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

.navbar-default.scroll{
background: #0A090C;
transition: 0.2s;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-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);}

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>

提前谢谢

Answer 1

这是你想要的吗？

我添加了以下内容

.navbar-default.scroll .navbar-brand{ 
  color:red;
}

当您定位nav-brand时，请使用父级的自定义类名称（在这种情况下为.scroll）

这将覆盖bootstrap CSS而不使用重要的

＆＃13;

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

＆＃13;

.navbar-default {
  background-color: transparent;
  border: none;
  transition: 0.2s;
}

.navbar-default.scroll {
  background: #0A090C;
  transition: 0.2s;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -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.scroll .navbar-brand {
  color: red;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<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>
<div style="height:1500px"></div>

＆＃13;

如何使用Jquery更改引导程序中滚动的字体颜色？

1 个答案: