在滚动时更改标题背景答案

【问题标题】：Change header background on scroll在滚动时更改标题背景
【发布时间】：2015-03-01 07:35:37
【问题描述】：

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

我正在使用下面的代码。 JS 正在工作，当滚动超过 100 像素时，我可以看到 .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;    
}

【问题讨论】：

您可以在其标题类中使用背景颜色，而不是在下面进行。
当滚动脚本时不断触发滚动，您的脚本会继续添加类（“不透明”）。 jQuery 足够聪明，只允许这种情况发生一次。其他代码可能需要更多逻辑。

标签： javascript header scroll

【解决方案1】：

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

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

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

【讨论】：

我喜欢这种方法。有没有办法让它优雅地淡入淡出？
你可以使用css过渡效果。看看吧。
由于某种原因，这个答案并没有改变我的导航栏的背景（我使用固定顶部导航栏）表单引导程序......知道为什么吗？