How to create Fixed Menu When Scrolling Page with CSS and jQuery

In this Tutorial, I will explain how to create fixed menu when scrolling page with CSS and jQuery, you already know jQuery right? A short description about jQuery, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

The aim is to have the navigation fixed when user scrolling the page and back to its original position when scrolling back to the top.

Demo

Click here to view demo page.

There are lots of tutorial out there on the net but it contains lots of JS code so I decided to create my own way and with only a few lines of JS code, in this tutorial I only use 2 JS functions to make the fixed menu working, yes only two functions.

Ok, let’s start.

jQuery Library

All we need is only jQuery library; you can download it in jQuery site or use other library from Google CDN, Miscrosoft CDN and jQuery CDN.

HTML

This contains our menu HTML element, this is just a simple HTML UL tag to make our menus but if you already have one then use that instead.

If you're going to use your old menus make sure to replace the class in JS code.

<div class="nav-container">
<div class="nav">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">CSS</a></li>
		<li><a href="#">PHP</a></li>
		<li><a href="#">SEO</a></li>
		<li><a href="#">jQuery</a></li>
		<li><a href="#">Wordpress</a></li>
		<li><a href="#">Services</a></li>
	</ul>
	<div class="clear"></div> /* Clear floating DIV */
</div>
</div>

CSS

To make our menu list horizontally we need to add CSS code.

.nav-container{ background: url('images/nav_bg.jpg') repeat-x 0 0;}
	.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* this make our menu fixed top */

.nav { height: 42px;}
	.nav ul { list-style: none; }
	.nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}
	.nav ul li:first-child{ padding-left: 0;}
	.nav ul li a { }
	.nav ul li a:hover{ text-decoration: underline;}

We set the z-index very high since we don’t want any other absolute element to be on top of our navigation and add with in percent to the center menu while scrolling.

Javascript

This small JS code contains the main functions of our fixed scroll menu.

jQuery("document").ready(function($){

	var nav = $('.nav-container');

	$(window).scroll(function () {
		if ($(this).scrollTop() > 136) {
			nav.addClass("f-nav");
		} else {
			nav.removeClass("f-nav");
		}
	});

});

So, if we are on the top less than 136px height in the pixel the menu is in the original position and add f-nav CSS class when greater than 136px height or add f-nav CSS class on a scroll, where the top page greater than 136px height.

That’s it, its easy right? Enjoy!

If you're experiencing bounce effect, see lot of suggested code in the comment section below.