我怎样才能让我的标题背景在滚动时变成白色？ [关闭]答案

【问题标题】：How could I make my header background turn white on scroll? [closed]我怎样才能让我的标题背景在滚动时变成白色？ [关闭]
【发布时间】：2021-03-14 08:16:50
【问题描述】：

我在学习过程中一直在努力实现这一目标。我刚开始使用 javascript，但对我来说一切都非常模糊。我怎样才能做到这一点？enter image description here

here is the html

here is the css

【问题讨论】：

最好将代码添加为文本而不是图像。
请将您要链接的代码直接添加到您的问题中...
这能回答你的问题吗？ Capturing the "scroll down" event?

标签： javascript html css

【解决方案1】：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
window.onscroll = function (e) {  
// called when the window is scrolled.  
$("#myheader").css("background-color", "white");
}
</script>


<header id="myheader">This is my div.</div>

【讨论】：

加载整个库来实现这一点似乎很可惜。
他/她可以解决 :) 我只是给出了一个想法

【解决方案2】：

在你的 header HTML 中添加 header 类，你需要改变背景。

添加此 jquery 以在滚动中添加和删除类。

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();    
    if (scroll <= 500) { // change this 500 by your own need
        $(".header").addClass("lightHeader").removeClass("darkHeader");
    } else {
        $(".header").addClass("darkHeader").removeClass("lightHeader");
    }
}

添加这个 CSS：

.darkHeader {
   backgound-color: #000; //whatever color you want
}
.lightHeader {
   backgound-color: #fff; //whatever color you want
}

【讨论】：