[Edit]

JavaScript - change navbar style on scroll bottom event

1 contributors

2 contributions

0 discussions

0 points

Created by:

nickkk0

647

In this article, we would like to show you how to change navbar style on scroll event using JavaScript.

Quick solution:

xxxxxxxxxx
 
var navbar = document.querySelector('.element');  // gets element by class
​
window.onscroll = function() { 
     if (document.body.scrollTop >= 20 || document.documentElement.scrollTop >= 20 ) {
        navbar.classList.add('blue'); // adds "blue" class when page is scrolled 20px down
    } 
    else {
        navbar.classList.remove('blue'); // removes class when page is scrolled back to top
    }
};

Practical example

Edit

In this example, we present how to change the navbar element color when we scroll the web page 20px to the bottom.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
​
    .container {
        height: 500px;
    }
​
    .navbar {
        width: 100%;
        height: 20px;
        position: sticky;
        top: 0;
        background: lightblue;
        transition: 0.5s;
    }
​
    .blue {
        background: blue;
    }
​
​
  </style>
</head>
<body style="height: 100px">
  <div class="container">
    <div class="navbar"></div>
  </div>
  <script>
​
    var navbar = document.querySelector('.navbar');
​
    function updateStyle() {
        if (document.body.scrollTop >= 20 || document.documentElement.scrollTop >= 20 ) {
            navbar.classList.add('blue');
        } 
        else {
            navbar.classList.remove('blue');
        }
    }
​
    document.addEventListener('scroll', updateStyle);
​
  </script>
</body>
</html>

Auto running

Explanation:

We use addEventListener to add scroll event to the window element, so the updateStyle() function will be called every time we scroll the web page,
every time the updateStyle() function is called, it checks the distance from the top (scrollTop property), if it is more than 20px it adds the blue class to the navbar element or removes it if it's less than 20px,
position: sticky with top: 0 makes the navbar always visible at the top of the web page,
transition: 0.5s makes smooth color change effect.

Note:

In the solution we use both document.body and document.documentElement:
xxxxxxxxxx
1
if (document.body.scrollTop >= 20 || document.documentElement.scrollTop >= 20 )
because of the browsers compatibility, to make sure it always works.