Change Navbar Text Color on Scroll

In this tutorial, we are going to create a simple navbar and change its background & text color on the scroll. We’ll create a sticky (fixed) navbar to see this color-changing effect in real-time.

Before moving forward, I’ll suggest you check the final output of this navbar project on the demo page. Well! you may have noticed both background and navbar text color change after some scroll. Don’t worry if you want to change the only text color or background color only, you can do that with a minor change (I explained below how to do that).

The coding concept for this navbar is simple and straightforward. You just need to create a navbar HTML, some CSS styles, and a little jQuery function to add a class name to change the background and text color. OK! let’s get started with coding.

How to Change Navbar Text Color on Scroll

First, we need a navbar in order to change the navbar text color. So, create a nav element with the class name "navbar" and place your list of links inside it. You can also add other elements in your navbar like logo, a search box, or whatever you want. So, a basic HTML structure for navbar is as follows:

<nav class="navbar">
  <ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">PHP</a></li>
    <li><a href="#">MySQL</a></li>
  </ul>
</nav>

If you already have a navbar, you just need to add a unique class name or id that we’ll use in jQuery function to change the navbar text color.

The CSS Styles for Navbar

In CSS, first of all, set some style for the navbar. Define its position as fixed in order to make it sticky on the top of the screen. Set a background color that will display before the scroll. The other values like height and box-shadow can be defined according to your needs.

.navbar{
  position:fixed;
  top:0;
  left: 0;
  background:#eee;
  width:100%;
  height: 60px;
  line-height: 60px;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2)
}

After that, create CSS styles for the navbar’s unorder list. Hide the default list bullets by CSS list-style-type property. Similarly, display the navbar list items as inline-block in order to show them in horizontally.

.navbar ul{
  list-style-type:none;
  padding:0;
}

.navbar ul li{
  display:inline-block;
  color:red;
}

Now, its time to style the links of the navbar. Like navbar list items, also display them as inline-block. In the following selector for hyperlinks, you can set a text color that will display before scroll.

.navbar ul li a{
    text-decoration: none;
    color: #222;
    display: inline-block;
    padding: 0 15px;
}

Set a background color for the hovered links. Define transition duration for smoothness.

.navbar ul li a:hover{
    background: rgba(255, 255, 255, 0.30);
    transition: .3s;
}

Now, define a class name, set background, and text color that you want to apply on the window scroll. We’ll add this class name in the navbar using a jQuery function. If you want to change the only text color then don’t define CSS background property.

.blue{
  background:blue;
}
.blue.navbar ul li a{
    color: #fff;
}

jQuery Function.

Before the following jQuery code, you need to load the main jQuery library by adding the following CDN link into your HTML.

<script
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
  crossorigin="anonymous"></script>

Finally, create a window scroll function and add a “blue” class after some scroll using if condition. Similarly, remove the class name using else condition.

$(document).ready(function(){
  $(window).scroll(function(){
  	var scroll = $(window).scrollTop();
	  if (scroll > 300) {
	    $(".navbar").css("background" , "blue");
	  }

	  else{
		  $(".navbar").css("background" , "#333");  	
	  }
  })
})

That’s all! I hope you’ve successfully created the navbar. If you have any questions or suggestions let me know by comment below.