我有一个背景透明的导航栏。滚动后如何使背景变黑。
这是模板live
还有带导航栏的html
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><img src="img/logo.svg" class="brand"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">Despre noi</a></li>
<li><a href="#services">Servicii</a></li>
<li><a href="#portfolio">Galerie</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
最佳答案
使用 Jquery 并添加一个类
jQuery
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 1) { // Adjust with your needs
$(".navbar").addClass("navbar-black");
} else {
$(".navbar").removeClass("navbar-black");
}
});
CSS
.navbar-black{
background: #000 !important;
}
关于html - 滚动后如何更改背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30393719/