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.querySelectorto return the first Element within the document that matches the specified selector, in this case it's.navbar.Then we have added a
window.onScrollYfunction 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
darkNavBarto 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)
Thank you! Really appreciate the shared JS! Works great!
Awesome, you're welcome.