Jquery 页面滚动时更改标题背景颜色

我一直在寻找解决方案，但我无法让它发挥作用

当用户开始滚动页面时，我希望我的页面标题从透明背景变为白色背景

HTML代码是：

<div class="header">
    <div class="topbar"></div>
    <div class="sitelogo"></div>
    <nav id="navigation">
        <ul>
            <li id="twitter"><a href="http://www.twitter.com/iamdanmorris"><em>Twitter</em></a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Home</a></li>
        </ul>
    </nav>
    <div style="clear:both;"></div>
</div>

小提琴：

如果用户从顶部滚动超过50像素，这将向元素添加

背景色：#fff

这将添加一个类“active”，这样您就可以在css中设置它的样式（更易于维护）

编辑：

$(function() {
    $(window).on("scroll", function() {
        if($(window).scrollTop() > 50) {
            $(".header").addClass("active");
        } else {
            //remove the background property so it comes transparent again (defined in your css)
           $(".header").removeClass("active");
        }
    });
});

还有你的css：

.active { background-color: #fff}

---

确保您还添加了此css规则，否则背景颜色不会改变

我没有尝试过，没有。请将此脚本放在页面底部，以确保元素已加载。您是否在css中创建了一个用于设置活动标题样式的类？（例如：.active{background color:#fff}）如果您还没有添加此小代码，如果它不起作用，请查看编辑。我现在唯一的问题是，在滚动时，我希望在透明背景上有白色导航文本，在白色背景上有灰色文本。你觉得你能帮忙吗@sakesalverda.header{color:#fff；background color:transparent；}和.header.active{color:#777；background color:#fff}如果我的完整答案有帮助，请标记我的答案，这样讨论就结束了

$(function() {
    $(window).on("scroll", function() {
        if($(window).scrollTop() > 50) {
            $(".header").addClass("active");
        } else {
            //remove the background property so it comes transparent again (defined in your css)
           $(".header").removeClass("active");
        }
    });
});

.active { background-color: #fff}