How do I create a sticky navigation bar that changes color on scroll using Bootstrap utilities only? Pending Review
Asked on Sep 16, 2025
1 Answer
To create a sticky navigation bar that changes color on scroll using Bootstrap utilities, you can utilize Bootstrap's sticky-top class and a bit of JavaScript to handle the color change.
<!-- BEGIN COPY / PASTE -->
<nav id="navbar" class="navbar sticky-top bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
</div>
</nav>
<div style="height: 2000px; padding-top: 60px;">
Scroll down to see the effect.
</div>
<script>
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
if (window.scrollY > 50) {
navbar.classList.remove('bg-light');
navbar.classList.add('bg-dark', 'navbar-dark');
} else {
navbar.classList.remove('bg-dark', 'navbar-dark');
navbar.classList.add('bg-light');
}
});
</script>
<!-- END COPY / PASTE -->- The "sticky-top" class makes the navbar stick to the top of the viewport when you scroll down.
- The JavaScript listens for the scroll event and toggles the navbar's background color and text color classes based on the scroll position.
- Ensure the page content is long enough to allow scrolling, so the effect can be observed.