CODEWITHSUNDEEP
javascripthtmlcss
Hector
Hector

Reputation: 33

Change div background color on scroll

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

Upvotes: 2

Views: 2256

Answers (4)

Ahmed Rafik Ibrahim
Ahmed Rafik Ibrahim

Reputation: 557

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

Upvotes: 1

mohamad_sdg
mohamad_sdg

Reputation: 91

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

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

Upvotes: 0

Coskun Ozogul
Coskun Ozogul

Reputation: 2487

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>

Upvotes: 2

arun
arun

Reputation: 368

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.

Upvotes: 0

Related Questions