向下滚动时添加一个类/更改导航栏的css属性?
问题描述:
我的导航栏的背景颜色在标题中是透明的。但是当我向下滚动,导航栏碰到下一部分时,我想让它的背景颜色变黑。我试过的代码不起作用。请看一看,看看我错在哪里?谢谢!向下滚动时添加一个类/更改导航栏的css属性?
HTML:
<div class="header" id="header">
<div class="container">
<div class="img"><img src="img.jpg">
<button><a role="button" href="#about">↓</a></button>
</div>
</div>
<div class="about" id="about">
<div class="container">
<div class="row text-center top">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
</div>
CSS:
.navbar-default {
background-color: transparent;
padding: 20px 0;
text-transform: uppercase;
border: none;
}
.nav-bg-black {
background-color: #000;
}
的jQuery:
$("#about").waypoint(function(direction){
if(direction == "down"){
$(".navbar-default").css("background-color", "#000");
} else {
$(".navbar-default").css("background-color", "transparent");
}
}, {
offset: '60px'
});
而且
$("#about").waypoint(function(direction){
if(direction == "down"){
$(".navbar-default").addClass("nav-bg-black");
} else {
$(".navbar-default").removeClass("nav-bg-black");
}
}, {
offset: '60px'
});
答
如果你正在使用的引导,你可以使用类.navbar逆
这里是我试过的样本,它是工作 链接:https://jsfiddle.net/ye7z26Lx/4/
代码更改:
$(function(){
$("#about").waypoint(function(direction){
if(direction == "down"){
$(".navbar-default").addClass("navbar-inverse");
} else {
$(".navbar-default").removeClass("navbar-inverse");
}
}, {
offset: '60px'
});
})
答
尝试此代码
var waypoint = new Waypoint({
element: $("#about"),
handler: function (direction) {
if (direction == "down") {
$(".navbar-default").css("background-color", "#000");
} else {
$(".navbar-default").css("background-color", "transparent");
}
},
offset: '60px'
});
.navbar-default不会出现在您的标记中。这可能是问题吗? –
你可以把它放在一个jsfiddle或类似的东西吗? – dodopok