Question

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

我已经设法在Stack处使用一些借用的jQuery来更改标题背景和标题文本的颜色，但问题是.addClass()和.removeClass()被应用于{{1链接。我试图以ul.navbar.nav > li > a这样的方式编写链接，而不是ul.navbar.nav.li.a，但不要高兴。

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

id

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

我正在使用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，并根据opaque添加的navbar-fixed-top类对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，这样您就可以看到行动中的变化。
我从transition: background-color 2s ease 0s;删除了.navbar-fixed-top.opaque。您不需要它，因为基本选择器已经拥有它。
我向transition: color 2s ease 0s;添加了.navbar-fixed-top ul.navbar-nav li>a。以为你可能会喜欢：）

滚动

1 个答案: