在滚动时更改 div 背景颜色答案

【问题标题】：Change div background color on scroll在滚动时更改 div 背景颜色
【发布时间】：2021-12-28 16:34:27
【问题描述】：

一旦用户开始滚动，我希望 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"; 
}
}

【问题讨论】：

标签： javascript html css

【解决方案1】：

据我了解，如果页面的滚动在顶部，则您希望设置为一种颜色，如果不是，则设置为另一种颜色

这是一个工作示例。

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>

【讨论】：

【解决方案2】：

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 函数没有运行。您可以通过在方法中使用console.log 来确认并观察控制台。

首先，虽然和你的问题无关，没有scroll属性，但是有onscroll属性。

即使您使用onscroll，也不会发生任何变化。因为当您滚动页面时，您不会滚动 #navbar 元素，而是滚动整个 window，因此您可以从元素中删除方法调用并在 JS 文件中添加正确的事件侦听器：

window.addEventListener('scroll', scrollnav)

确认函数运行后，您的控制台中将显示更有意义的错误消息。

要获得最高位置，document.body.scrollTop() 不是函数，因此您不能调用它。我建议您使用window.scrollY 以获得最佳效果。

最后但同样重要的是，CSS background-color 属性没有none 的值，请改用unset 或initial。

注意事项：

即使在函数定义前添加window.addEventListener，它仍然可以工作，因为hoisting
监听窗口滚动事件是一个代价高昂的操作，你应该根据应用考虑节流或谴责，但这不在问题范围内

【讨论】：

【解决方案3】：

“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> 标记，您可以看到它正在工作。

干杯。

【讨论】：

【解决方案4】：

let navbar = document.getElementById("navbar");

 navbar.addEventListener('scroll', function (e) {
      // handle the scroll event
 });

【讨论】：