我正在尝试更改滚动页面的标题背景。
我正在使用下面的代码。JS正在工作，当滚动大于100px时，我可以看到.not-transparent类已添加到HMTL中的元素。问题是，该类没有随后在CSS中被调用。
这是HTML：
<header>
<div id="logo">logo</div>
<div id="nav-wrapper">
<nav>
nav
</nav>
</div>
<div class="clear"></div>
</header>
<script>
$(window).on("scroll", function () {
if ($(this).scrollTop() > 100) {
$("header").addClass("not-transparent");
}
else {
$("header").removeClass("not-transparent");
}
});
</script>
这是CSS
header {
width:100%;
position:fixed;
top:0px;
z-index:3;
}
header.not-transparent {
background: #252525;
}
您也可以使用css属性。
<script>
$(window).on("scroll", function() {
if ($(this).scrollTop() > 100) {
$("header").css("background","#252525");
}
else {
$("header").css("background","#fff");
}
});
</script>
确保将您的子div背景设置为透明，以便您可以看到父div背景。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句