Change div background color on scroll-CodePudding

I want a div to change background color once a user start to scroll. I placed what I wrote in this codepen. Here is the content of the js file:

function scrollnav() {
var y = document.body.scrollTop();
 if(y>1){
document.getElementById("navbar").style.backgroundColor = "blue"; 
      }
else{   document.getElementById("navbar").style.backgroundColor = "none"; 
}
}

CodePudding user response：

As I understand, you want to set to a color if the scroll of the page is on the top and another color if not

Here is a working exemple.

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>

CodePudding user response：

The "onScroll" event should be attached to <body>. What you do inside the javascript method is where you decide which <div> need to get painted. I've put together a small example below:

<!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>

You can scroll the page and see that the <div> is getting the background color changed.

In your codepen code, if you move scroll="scrollnav()" to <body> tag, you can see it working.

Cheers.

CodePudding user response：

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

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

CodePudding user response：

TL;DR, Here is a working js code:

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";
  }
}

Now let's dive into some educational details:

Simply, your JS function doesn't run. You can confirm that by using console.log inside the method and watch the console.

First of all, although it has nothing to do with your problem, there is no scroll attribute, but there is an onscroll attribute.

Even if you use onscroll nothing will change. Because when you scroll the page you don't scroll your #navbar element, you scroll the whole window so you can remove the method call from your element and add the correct event listener in your JS file:

window.addEventListener('scroll', scrollnav)

Once you confirm your function runs, you will have more meaningful error messages in your console.

To get the top possition, document.body.scrollTop() is not a function so you can't call it. I suggest you use window.scrollY for best results.

Last but not least, the CSS background-color attribute doesn't have a value of none, use unset or initial instead.

Notes:

even if you add window.addEventListener before your function definition, it will still work because of hoisting
listening to the window scroll event is a costly operation, you should consider throttling or denouncing depending on the application, but it's out of the scope of question