更改 header 滚动背景

Question

我正在尝试更改滚动页面的 header 背景。

我正在使用下面的代码。 JS 正在工作，当滚动大于 100px 时，我可以看到 class .not-transparent 被添加到 HMTL 中的元素。问题是 class 随后没有在 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>

确保您的 child div 背景设置为反式parent 以便您可以看到 parent div 背景。

更改 header 滚动背景

Change header background on scroll

javascript

header

scroll