In last week, one of our clients asked us to develop a sticky navigation bar for his website. Such navigation or menu bars are pretty much used by every website. You may have noticed the menu bar which sticks to the top of the webpage or move along the page while you scroll down. Making a sticky header or any container which is already on the top of the page is not a big deal. All you need to do is apply fixed position to that container, it will become sticky and always remains on top, but situation becomes tricky if navigation bar is below header and you want to make it sticky after placing it on the top after when user scrolls down the page and header disappears. The Image below will help you to understand the task.

Above image is clearly defining our goal which is in short to place the navigation bar on top and make it sticky after user scrolls down and header disappears. For demo lets prepare a dummy html web page which will have the header, below header there will be a navigation bar and then there will be a content container with dummy content and a fixed height to create a scroll on the page. Here is the HTML and CSS or our dummy webpage.

<div class="header"><strong>Header</strong></div>
<div class="nav"><strong>Navigation Bar</strong></div>
<div class="content"></div>
<style>
body{
	margin: 0;
}
.header{
	height: 50px;
	background-color: #000;
	font-size: 16px;
	text-align: center;
	color: #fff;
	padding-top: 3%;
}
.nav{
	height: 30px;
	background-color: #D7D7D7;
	font-size: 16px;
	text-align: center;
	color: #000;
	padding-top: 5px;
	width: 100%;
}
.content{
	height: 1200px;
}
</style>

I guess the HTML and CSS is pretty straight forward, self explanatory and very easy to understand. Now, lets start thinking about the solution of our problem. Obviously we are going to use jquery to get our desired result. As you might have figured out that we will target the scroll event of DOM (Document Object Model) to trigger our jquery code for making the navigation bar sticky. As, we need to make the navigation bar sticky when user scrolls down and the header container will disappear so we also need to measure the scroll height. Okay, now lets start coding the action part which is coding the jquery.

<script type="text/javascript">
$(document).ready(function (){
	$(window).scroll(function() {
	}
}
</script>

The first line of code might seem very familiar if you have used jquery before, in this code you are selecting the whole document and then you will apply firing a function on ready event which will let you to execute your jquery when the webpage or document is completely loaded. In the second line we are again selecting the window and firing function on its scroll events. That means whatever we write between this function will be fired on the scroll event. Now, before proceeding forward we need to determine the scroll length from top when header disappears from the screen. We can either find it by the jquery function scrollTop() which will also be our key option or by measuring the length of our header container. You can also refer to Measuring user scroll with jquery.

In our case the value of scroll top is 90. So what we are going to do is to check the length of user top scroll if the length of user scroll  becomes greater or equal to 90 we will apply CSS to place the navigation bar on top and make it sticky. We can also use jQuery toggleClass function to change the CSS of navigation bar but I am comfortable doing it with jquery.

$(document).ready(function (){
	$(window).scroll(function() {
		var scrollTop = 90;
		if($(window).scrollTop() >= scrollTop){
			$('.nav').css({
				position : 'fixed',
				top : '0'
			});
		}
	}
}

Once you have added the above code, the moment you will refresh the page, and scroll down your page as soon as the header will disappear from the screen navigation?? bar will be placed on top and it will move along the page, but if you scroll back on top you will notice that the navigation bar will remain on top of the page above header and we obviously don’t want to mess with the user experience. So we will apply another check on top scroll of the DOM and when it will become smaller than 90 we will simply remove our additional CSS. Here is final shape of our jquery code.

<script type="text/javascript">
$(document).ready(function(){
	$(window).scroll(function(){
		var scrollTop = 90;
		if($(window).scrollTop() >= scrollTop){
			$('.nav').css({
				position : 'fixed',
				top : '0'
			});
		}
		if($(window).scrollTop() < scrollTop){
			$('.nav').removeAttr('style');	
		}
	})
})</script>

Do give us Feedback on this by leaving comments below and if you want us to help you with anything or if you have suggestions. Let us know and we’ll be more than happy to assist. Enjoy and keep coding!

View Demo