更改滚动条的标题背景

C-M 发表于 Dev

厘米

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

我正在使用下面的代码。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] 删除。