javascript - 更改滚动条上的 Bootstrap 标题链接颜色

Question

我正在开发一个新的 Bootstrap 元素，当用户向下滚动带有视差图像的页面时，它会更改背景颜色、标题文本颜色和导航链接颜色 .

我已经在 Stack 上用一些借来的 jQuery 设法改变了标题背景和标题文本的颜色，但问题是 .addClass()和 .removeClass()应用于 ul.navbar.nav > li > a关联。我试过这样写链接ul.navbar.nav.li.a没有 ul , 但没有快乐。

我尝试了通过 <div> 引用链接的其他方式然后用id一切都无济于事。已尝试使用 Google 的检查功能显示的所有内容，但没有成功。

$(window).scroll(function() {
  if ($(this).scrollTop() > 50) {
    $('.navbar-fixed-top').addClass('opaque');
    $('.h2-style').addClass('opaque');
    $('ul.navbar-nav>li>a').addClass('custom');
  } else {
    $('.navbar-fixed-top').removeClass('opaque');
    $('.h2-style').removeClass('opaque');
    $('ul.navbar-nav>li>a').removeClass('custom');
  }
});

.navbar-fixed-top {
  background-color: rgba(255, 255, 255, 1);
  transition: background-color 2s ease 0s;
}

.navbar-fixed-top.opaque {
  background-color: rgba(41, 128, 185, 0.95);
  transition: background-color 2s ease 0s;
}

ul.navbar-nav.custom>li>a {
  color: #FFF !important;
}

ul.nav.navbar-nav>li>a:hover {
  color: #FF9800;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="index.html"><h2 class="h2-style">3 Strikes <span class="h3-style">Stops Repeat Offenders</span></h2></a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">News</a></li>
        <li><a href="#contact">Studies</a></li>
        <li><a href="#contact">Mike's Desk</a></li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">3S Law <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#contact">3S Law</a></li>
            <li><a href="#contact">3S Crimes</a></li>
          </ul>
        </li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">More <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Friends of 3S</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Book Page</a></li>        
          </ul>
        </li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

<!-- Begin page content. The travel for 500px is there to accommodate a large graphic (parallax--bg) for a proportional parallax scroll feature. It is critical for the effect.// -->

<section class="bgimg">
  <div class="parallax--bg feature-text">        
    <h1 class="h1-style">Three Strikes and <br>You're Out!</h1>        
  </div> <!--  .parallax--bg //-->
</section> <!--  .bgimg //-->

我正在使用 Bootstrap 的固定页脚模板。

有人有什么想法吗？

TIA

Answer 1

您的 CSS 和 JS 选择器混淆了。

在 CSS 中你使用:ul.navbar-nav.custom>li>a
您的 JS 创建:ul.navbar-nav>li>a.custom ($('ul.navbar-nav>li>a').addClass('custom');)

您可以更改 CSS 或 JS...
但实际上，您可以删除大部分 JS，并根据为 navbar-fixed-top 添加的 opaque 类对 CSS 进行所有更改。
您可以从您的 CSS 中删除 !important，无论如何您都不应该使用它们。

查看代码片段获取演示:

$(window).scroll(function() {
  if ($(this).scrollTop() > 30) {
    $('.navbar-fixed-top').addClass('opaque');
  } else {
    $('.navbar-fixed-top').removeClass('opaque');
  }
});

.navbar-fixed-top {
  background-color: rgba(255,255,255, 1);
  transition: background-color 2s ease 0s;
}
.navbar-fixed-top.opaque {background-color:rgba(41,128,185, 0.95);}

.navbar-fixed-top .h2-style {
  transition: color 2s ease 0s;
}
.navbar-fixed-top.opaque .h2-style {color:#AA0;}

.navbar-fixed-top ul.navbar-nav li>a {
  transition: color 2s ease 0s;
}
.navbar-fixed-top.opaque ul.navbar-nav li>a {color:#FFF;}
.navbar-fixed-top.opaque ul.navbar-nav li>a:hover {color:#FF9800;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="index.html"><h2 class="h2-style">3 Strikes <span class="h3-style">Stops Repeat Offenders</span></h2></a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">News</a></li>
        <li><a href="#contact">Studies</a></li>
        <li><a href="#contact">Mike's Desk</a></li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">3S Law <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#contact">3S Law</a></li>
            <li><a href="#contact">3S Crimes</a></li>
          </ul>
        </li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">More <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Friends of 3S</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Book Page</a></li>        
          </ul>
        </li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

<!-- Begin page content -->
<section class="bgimg">
  <div class="parallax--bg feature-text">        
    <h1 class="h1-style">Three Strikes and <br>You're Out!</h1>        
  </div> <!--  .parallax--bg //-->
</section> <!--  .bgimg //-->

• 我将 ul.navbar-nav>li>a 更改为 ul.navbar-nav li>a 以便嵌套链接也变为白色。我假设这就是您想要的，但如果不是，您知道它来自哪里。
• 我为 .navbar-fixed-top .h2-style 和 .navbar-fixed-top.opaque .h2-style 添加了 CSS，这样你就可以看到行动也发生了变化。
• 我从 .navbar-fixed-top.opaque 中删除了 transition: background-color 2s ease 0s;。您不需要它，因为基本选择器已经有了它。
• 我添加了一个 transition: color 2s ease 0s; 到 .navbar-fixed-top ul.navbar-nav li>a。我想你可能会喜欢:)