我正在开发一个新的Bootstrap项目,当用户使用视差图像向下滚动页面时,该项目会更改背景颜色,标题文本颜色和导航链接颜色。

我已经设法在Stack上使用一些借用的jQuery来更改标题背景和标题文本的颜色,但是问题是.addClass().removeClass()被应用于ul.navbar.nav > li > a链接。我试图以这种方式在ul.navbar.nav.li.a且没有ul的情况下编写链接,但并不高兴。

我尝试了其他方法通过<div>引用链接,然后使用id全部无效。 Google的Inspect功能显示的所有内容均已尝试,但没有成功。



$(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

最佳答案

您在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,并将CSS中的所有更改都基于为opaque添加的navbar-fixed-top类。
您可以从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,以便您也可以看到操作上的变化。
我从transition: background-color 2s ease 0s;中删除​​了.navbar-fixed-top.opaque。您不需要它,因为基本选择器已经有了它。
我在transition: color 2s ease 0s;中添加了.navbar-fixed-top ul.navbar-nav li>a。以为你可能会喜欢:)

07-24 09:45
查看更多