Responsive Sticky Navbar With Scroll Color Change Using jQuery

Learn how to create a responsive sticky navbar with scroll color change using Bootstrap 3, HTML, CSS, and jQuery.

Responsive Sticky Navbar With Scroll Color Change Using jQuery

Sticky Navbar With Scroll Color Change Using Bootstrap 3

This Sticky Navbar is built using HTML, CSS, Bootstrap 3, and jQuery to create a responsive navigation bar that remains fixed at the top of the page while scrolling. The design improves website navigation and user experience by keeping important menu links accessible at all times.

The project uses jQuery scroll events to dynamically change the navbar color when users scroll through the page. Combined with Bootstrap 3's responsive framework and smooth scrolling effects, the navigation bar delivers a modern and professional appearance across desktops, tablets, and mobile devices.

Steps to Create a Sticky Navbar With Scroll Color Change

Follow these simple steps to build a responsive sticky navigation bar:

Create a project folder, for example, sticky-navbar-scroll-color-change.
Inside the folder, create three files: index.html, style.css, and script.js.
Add the Bootstrap 3 CDN link to your HTML document.
Create the navigation bar structure using HTML and Bootstrap components.

                            
                                <!DOCTYPE html>
<!-- TheProviders ----------------- youtube.com/@TheProvidersOfficial -->
<html>
<head>
	<title>Sticky Navbar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="script.js">
</head>
<body>
<div id="bgimage">
<nav class="navbar navbar-inverse navbar-fixed-top" >
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">The Providers</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li ><a class="active" href="#">Home</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">About us</a></li>
      </ul>
      
    </div>
  </div>
</nav>



</div>













</body>
</html>

Apply custom CSS styling to design the navbar and scrolling effects.

                            
                                <style type="text/css">
.navbar-inverse{
	background-color: transparent;
	border-color:transparent;
	transition: 0.2s;
	height: 60px;
}	
#bgimage{
	background-image: url(image1.jpg);
	height: 850px;
	background-size: cover;
}
.navbar-inverse .navbar-brand{
	color: #fff;
     padding-top: 18px;
	font-family: monospace;
	font-size: 30px;
	font-weight: bold;
	padding-left: 25px;
}
#myNavbar li a{
	color: white;
	font-family: monospace;
	font-size:19px;
	padding: 20px;	
	margin-right: 18px;
	transition: 0.3s ease;

}
#myNavbar li a:hover{
	color: #fcba03;
	font-weight: bold;
}#myNavbar ul .active{
	color: #fcba03;
	font-weight: bold;

}
</style>

Use jQuery to detect page scrolling events. Change the navbar background color dynamically when users scroll down the page. Add smooth scrolling functionality for navigation links. Save the files and open the project in a browser to test the sticky navbar.

                            
                                <script>
	
$(document).ready(function(){
  $(window).scroll(function(){
  	var scroll = $(window).scrollTop();
	  if (scroll > 100) {
	    $(".navbar-inverse" ).css("background" , "#4497fc");
	    $(".navbar-nav").css("background" , "#4497fc");
	  }

	  else{
		  $(".navbar-inverse").css("background" , "transparent");
		  $(".navbar-nav").css("background" , "transparent");  	
	  }
  })
})
</script>

Download Code Files