滚动更改标题背景

Question

我试图在滚动时更改页面的标题背景。

我使用下面的代码。 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;    
}

Answer 1

你也可以使用css属性作为。

 <script>
 $(window).on("scroll", function() {
    if ($(this).scrollTop() > 100) {
       $("header").css("background","#252525");
    }
    else {
       $("header").css("background","#fff");
    }
 });
 </script>

确保您的子div背景设置为透明，以便您可以看到父div背景。