我正在开发一个新的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
。以为你可能会喜欢:)