How to Change Bootstrap 5 navigation bar styling on scroll without using jQuery

#javascript #bootstrap #programming #css

Suppose you want to change the background color of your bootstrap 5 navigation bar on scroll and you do not want to use jQuery for this behaviour . As the official documentation of Bootstrap says

Bootstrap 5 is designed to be used without jQuery, but it’s still possible to use our components with jQuery.

In this blog post, we will have a look about how can we achieve this behavior without the use of jQuery .

First, let us add a bootstrap 5 CDN in index.html file . Also let us import style.css file which is located inside stylesheets folder .

HTML Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Navigation bar Scroll</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="stylesheets/style.css">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
</html>

Then, inside the body tag add a navigation menu and three different div for home, about and services .

HTML Code


<body>
  <nav class="navbar navbar-expand-sm fixed-top">
    <div class="container">
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link active" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#services">Services</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div id="home">
  </div>

  <div id="about">
  </div>

  <div id="services">
  </div>
 </body>
<script src="script.js"></script>

Also, we have added a script tag to call script.js file after loading the HTML content . We will add logic to script.js file later .

Now, let us go to style.css file and add some styling in order to differentiate three sections: home, about and services .

CSS

#home {
    background-color: #00ffff;
}

#about {
    background-color: #0000ff;
}

#services {
    background-color: #a52a2a;
}
#home, #about, #services {
    height: 100vh;
}

Here you can see three sections occupying their respective heights with different background colors.

Now comes the interesting part !

We will now add logic to script.js file in order to change our nav bar styling on scroll .

JavaScript

const header = document.querySelector('.navbar');

window.onscroll = function() {
    var top = window.scrollY;
    console.log(top);
    if(top >= 100) {
        header.classList.add('darkNavBar');
    }
    else {
        header.classList.remove('darkNavBar');
    }
}

And, lastly update style.css file

.darkNavBar {
  background-color: #000000;
}

This is how our navbar looks !

Let us understand what the above javascript code does .

First, we have used document.querySelector to return the first Element within the document that matches the specified selector, in this case it's .navbar .
Then we have added a window.onScrollY function which basically checks if the number of pixels that the document is currently scrolled vertically is greater than or equal to 100 .
It it's true it adds a new class called darkNavBar to the querySelector i.e. .navbar .

Conclusion

This is how you can change the styling of navigation bar on scroll using JavaScript . I hope you enjoyed this blog post . Feel free to share your thoughts on this . You can find me on Twitter for daily contents on Web development .