Javascript 使用滚动更改元素的背景

我做了一个很好地代表了我想做的事情。问题是：

标题{ 位置：固定； 高度：70像素； 宽度：100%； 文本对齐：居中； 线高：70px； 字号：28px； 盒影：1px10px555； 背景：rgba0,0,0,0； } .项目{ 浮动：对； 边框：1px纯黑； } 内容{ 位置：绝对位置； 顶部：80px； } 有些事情很好。。。 项目1 项目2 项目3 如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

如果你注意的话，很多文字可能会很有趣

---

如果我正确理解了您的问题，那么当内容到达标题部分时，您希望标题的背景颜色为白色

在本例中，您需要添加一点jQuery代码，如下所示

JS

以及对现有代码进行一些小的CSS更改。添加了z-index:1并添加了一个类

CSS

---

你可以在这里看到这个工作小提琴

当达到正确的滚动距离时，我想将标题的背景更改为白色？正确的距离是多少？你能详细说明一下要求吗？测试它时，我只是忘了包括一些CDN链接，但我做了，它只是工作。感谢您的简单解决方案^^@Pierrelatigau我很高兴我的解决方案对您有效。如果我的回答对你有帮助，你可以接受。

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

#header {
    position:fixed;
    height:70px;
    width:100%;
    text-align:center;
    line-height:70px;
    font-size:28px;
    box-shadow: 1px 1px 10px #555;
    background:rgba(0,0,0,0);
    z-index:1;
}

#header.active {
  background:#fff;
}