javascript - 滚动时更改标题背景

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 背景。