DEV Community

Cover image for How to Change Bootstrap 5 navigation bar styling on scroll without using jQuery
Sampurna Chapagain
Sampurna Chapagain

Posted on • Edited on

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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'); } }
Enter fullscreen mode Exit fullscreen mode

And, lastly update style.css file

.darkNavBar { background-color: #000000; }
Enter fullscreen mode Exit fullscreen mode

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 .

Top comments (2)

Collapse
 
tdvr profile image
tdvr •

Thank you! Really appreciate the shared JS! Works great!

Collapse
 
sampurna profile image
Sampurna Chapagain •

Awesome, you're welcome.