在滚动时更改 div 背景颜色
[英]Change div background color on scroll
问题描述
一旦用户开始滚动，我希望 div 更改背景颜色。 我把我写的东西放在这个codepen中。 这是js文件的内容：
function scrollnav() {
var y = document.body.scrollTop();
if(y>1){
document.getElementById("navbar").style.backgroundColor = "blue";
}
else{ document.getElementById("navbar").style.backgroundColor = "none";
}
}
4 个解决方案
解决方案1
0 2021-12-28 08:13:42
“onScroll”事件应附加到<body> 。 您在 javascript 方法中所做的是您决定需要绘制哪个<div>的地方。 我在下面整理了一个小例子：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<style media="screen">
#container
{
background-color: black;
min-height: 200vh;
}
</style>
<body onscroll="javascript: changeColor();">
<div id="container"></div>
</body>
<script type="text/javascript">
function changeColor()
{
document.getElementById("container").style.backgroundColor = "red";
}
</script>
</html>
您可以滚动页面并查看<div>正在更改背景颜色。
在您的codepen代码中，如果您将scroll="scrollnav()"移动到<body>标记，您可以看到它正在工作。
干杯。
解决方案2
0 2021-12-28 08:23:28
据我了解，如果页面的滚动位于顶部，则您希望设置为一种颜色，如果不是，则设置为另一种颜色
这是一个工作示例。
window.onscroll = function(ev) { if (window.scrollY == 0) { document.getElementById("navbar").style.backgroundColor = "red"; } else { document.getElementById("navbar").style.backgroundColor = "dodgerblue"; } };
.herodiv{ min-height: 500px; background-color: yellow; width: 100%; margin 0px; padding 0px; }.navigation{ display: flex; justify-content: space-between; align-items: center; justify-content: center; padding-top: 0px; padding-left: 35px; padding-right: 35px; position: -webkit-sticky; position: fixed; top: 0px; width: 100%; z-index: 9999; } <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body > <section class = "hero"> <div class = "herodiv"> <div id="navbar" class ="navigation" scroll="scrollnav()"> menu section 1 section 2 </div> </div> </section> </body> </html>
解决方案3
0 2021-12-28 08:24:09
let navbar = document.getElementById("navbar");
navbar.addEventListener('scroll', function (e) {
// handle the scroll event
});
解决方案4
0 2021-12-28 08:34:27
TL;DR，这是一个有效的 js 代码：
window.addEventListener("scroll", scrollnav);
function scrollnav() {
var y = window.scrollY;
if (y > 1) {
document.getElementById("navbar").style.backgroundColor = "blue";
} else {
document.getElementById("navbar").style.backgroundColor = "unset";
}
}
现在让我们深入了解一些教育细节：
简单地说，你的 JS function 没有运行。 您可以通过在方法中使用console.log来确认并观察控制台。
首先，虽然和你的问题无关，没有scroll属性，但是有onscroll属性。
即使你使用onscroll也不会改变。 因为当您滚动页面时，您不会滚动您的#navbar元素，而是滚动整个window以便您可以从元素中删除方法调用并在 JS 文件中添加正确的事件侦听器：
window.addEventListener('scroll', scrollnav)
一旦您确认您的 function 运行，您将在控制台中看到更有意义的错误消息。
要获得最高位置， document.body.scrollTop()不是 function 所以你不能调用它。 我建议您使用window.scrollY以获得最佳效果。
最后但并非最不重要的一点是，CSS background-color属性没有值none ，请改用unset或initial 。
笔记：
- 即使您在 function 定义之前添加
window.addEventListener，它仍然会因为提升而工作 - 收听 window 滚动事件是一项代价高昂的操作，您应该根据应用程序考虑限制或谴责，但它不在问题的 scope 范围内
滚动时的背景颜色更改
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.