Simple smart sticky navigation bar with jQuery

Simple Smart Sticky Navigation bar with jQuery

It’s been a while since I posted tutorial article. In this post, I will show you how to create a smart sticky navigation bar easily with just few lines of Javascript codes, powered by the mighty jQuery.

Smart sticky navigation bar is a bar that sits at its original place above the fold, but when you start scrolling down the long page, it will sticks at the top of the browser window and follows, similar to IGN’s corporate website’s navigation bar. Continue reading out the demo and the codes after the break.


Check out the demo! It works on most modern browsers.


For this tutorial, we are going to use HTML, CSS and jQuery. The HTML structure is fairly simple, the most important thing is to have a header, the navigation bar and the content area below the navigation bar. Everything wrapped in a div id called “wrapper”.


<div id="wrapper">

		<h1>Simple Smart Sticky Navigation Bar</h1>

		<p>Navigation Content</p>
    	<div id="content">
                <p>Website content here.</p>

Here are the important CSS rules to style up the page. For the navigation bar, I used the artwork from 5 stylish navigation bars which was created by me.

#wrapper {
	margin: 0 auto;

header {
	padding:70px 0;

nav {
	background:url(img/nav-bg.png) no-repeat;
	height: 60px;
	width: 960px;
	margin-left: -10px;
	position: relative;

#content {
	background: #fff;
	height: 1500px; /* presetting the height */
	box-shadow: 0 0 5px rgba(0,0,0,0.3);

.fixed {

Notice that I added the “fixed” class which we will going to use it in jQuery code.

At first we need to have the jQuery file. Grab it from jQuery official site or copy paste via, then paste it at the bottom of the HTML file before the end of body tag. Then include the javascript code below within another script tag:

$(document).ready(function() {
        //Calculate the height of <header>
        //Use outerHeight() instead of height() if have padding
        var aboveHeight = $('header').outerHeight();
	//when scroll
	        //if scrolled down more than the header’s height
                if ($(window).scrollTop() > aboveHeight){
	        // if yes, add “fixed” class to the <nav>
	        // add padding top to the #content 
                (value is same as the height of the nav)
                } else {
	        // when scroll up or less than aboveHeight,
                remove the “fixed” class, and the padding-top

Well that’s it! Please check out the demo to see the result and view the source code! Personally I think scrollTop() is a very useful when dealing with scrolling, it can be used in many simple yet useful functions. I hope you learn something from this tutorial!

Background texture from Subtle Patterns | Font from Google Web Fonts

Similar Posts:
Powered by Shutterstock


  • PV

    Hi, I like your plugin and this is somewhat I’m looking for. Is it possible to scroll up the sticky header once it reaches the footer div???

    Thank You Very Much.

  • Gabe C

    This is exactly what I was looking for and it works like a charm. Thanks so much!

  • Snagy

    is it possible to have certain height of the top content fixed. For example: I have


    I would like all the way upto the nav2 to be stuck n the top of the browser when you start scrolling the text. Thanks for all your help in advance.

  • Luc V

    This tricks works perfectly but my probleme is that I would like addClass when I scroll over two one not only one.
    Is that possible ?

    • jayhan

      Hi Luc V, I don’t really understand your question. Which element you would like to AddClass?

  • m4as


    This is a so clean and powerfull sticky navbar, i updated my webapp in 2 steps :
    – updating my CSS file with your nav properties & adding .fixed class
    – adding your jQuery code in my jQuery menu file

    Thank you 🙂

    • jayhan

      m4as, you are most welcome!

  • DanH

    I would like to know how to change the nav-bar once it becomes “sticky” such as :

    They include their logo once you scroll past it, how would this be possible?

    • jayhan

      Hi Danh, that will require extra jquery to call the logo to slide in when the user start scrolling down.

  • Randy

    Hi Jayhan, thank you very much for providing this. I was just testing this code (in a blank test page) and it works like a dream on all the five major browsers.

    However, when I added your code into the website which I am currently working on, in Safari and Chrome, it seems that my navbar ‘jumped’ upwards to the midpoint of my top div. No such problems in Firefox, IE and Opera.

    I am sure this has nothing to do with your code but something to do with my CSS or something. I am at my wits’ end. Can I seek some advice from you?

    • jayhan

      Hi Randy, yeah sure I can take a look into it.

  • Randy

    Thanks jayhan!

    My site is at, the jscript is at the top, whereas the nav bar is under .

    For the CSS (, the classes are .nav-pos, nav, nav:after, .nav-bar and .fixed.

    I sincerely appreciate your help!

  • Randy

    Hi Jayhan,

    Thanks for offering to help! I have devised a work around. Thanks again!

  • rajunix

    Thanks for such a great tutorial. But it is not working IE6 …. plz help me

    • jayhan

      Hi rajunix, IE6 is a very old browser and you should upgrade it to the latest version. Or use better browser like Chrome or Firefox.

  • Kiwi

    Hi jayhan,
    nice tutorial!

    I got a problem: In Firefox everything works well. But when I scroll down on my website using Google Chrome, then the fixed navigation ‘jumps’ a few pixels to the left. I don’t know how to solve this.

    It would be nice if you could help me 🙂

    Regards Kiwi

    • jayhan

      Hi Kiwi, is there any demo I can see?

  • XTC

    If it’s so wonderful why are you not using it on this website?

  • Kiwi

    Hi jayhan,
    yeah, there’s a demo. Easily go to using Google Chrome and scroll down a bit.

    Regards Kiwi

    • Jayhan

      Hi Kiwi, I realize that you have this “left:10px” property at the #wrapper id. I think if you remove it, the problem will solve. Please give it a try.

  • Kiwi

    Hey jayhan,
    this solves the problem, thank you 🙂

  • MikeG

    Hi Jayhan,
    I like the way you achieved this with a solution so simple and clean. I’ve tried other solutions which were over-complicated, I think. This worked very well for me, Thanks!

  • Dim

    Excellent tutorial but for people who have an elementary knowledge of coding…for the rest of us can you create video of how-to-do it???

  • Lia

    Okay, I love the demo. I tried to add the code to my website with a few changes, but it is not working. Do I have to name the navigation (nav)? Currently, I have my nav called #navigation. And also instead of scrolling, can I have it to stick when the user click on the navigation button? Let me know. Any help will be greatly appreciated.

    • Jayhan Sim

      Hi Lia,

      No, as long as you target it to the #navigation, it will work. Not so sure about your second request, maybe it can work.

  • Lia

    Okay, I got it to work. Disregard the second request. I have one more question. I will also like the header along with the navigation to stick on the top. How can I accomplish this?

  • Lia

    LoL. Disregard the last request. I got it to work. Thank you.

  • Ante

    Hi Jayhan.
    I’ve tried this for an hour, and I’m not good enough on jQuery to solve the problem.
    The problem is that I’ve got an div around nav but cant that div to be fixed.
    So it will be relative and stay on top..


    Any suggestions how to solve the problem?

  • Ante

    The code is like this 🙂 thx!


    • Jayhan Sim

      Hi Ante, I’m sorry but could you post your code at online editor like JSFiddle or JSbin?

  • Ante

    I think this will be right,
    And it can be little hard to read the css, its build on & lessees!

  • ira

    This is a mess in IE8.

  • http://n/a Nigel

    Breaks on Android 4.1 smartphone tested using Google Nexus S. Bug happens when you zoom in on page and scroll down below the header, and scroll to the right, the fixed navigation bar slides completely off the page to the right. I wish there was a fix to this because I would really like to use this great navigation bar.

  • http://n/a Nigel

    ^ Fixed bug by adding the following css .fixed{left: 0;}

  • Jason

    i cant seem to get this to work. I’m very new to jquery and cant seem to get my #nav div to stick.

    Can anyone try and help me figure this out?

  • ellen

    Does this work with the jquery scrollto function – or is there a way I can add a scroll effect using the code in your tutorial? I’m trying to creating the sliding effect when you click one of the navigation buttons – but can’t seem to get it to work.

    My site is

    Many, many thanks!


  • Bryan

    Jayhan! Wow and thank you – my question is that for older browsers and my purchased blog template to work, the CSS for nav and header and content are locked in pre-HTML5 div id’s. I see you’re going right to HTML5 with “nav” as the tag – how do I change the javascript code to work on my antique div id’s?

    And you are incredible for keeping up with our questions almost a year!

  • Cody

    Hi Jayhan SIm,

    I am doing a left hand navigation with this feature – but when I scroll to the bottom of the page is there a way to implement a footer command to disable the fixed once the footer is loaded / seen / ran into?

    – Cody

  • CeeJay

    has anyone a solution for mobile browsers? The problem with this approach is that is looks ugly on them, because the $(window).scroll() -event is only fired when the window STOPPED scrolling. And this is when the navigation-bar is “hopping” from outside the view of the middle of the page (depending on your scroll-direction) onto the top of the page.

    Most frameworks have a fixed menu-bar from the start on – then it’s no problem. I am not even sure if there is a solution for this?

    • Jayhan Sim

      Hi CeeJay, I think my solution doesn’t act well in the mobile browsers.

  • Martin_K

    Not sure if it is a browser issue, using Safari 6.0.2, but the demo is jerky with the navigation bar appearing to ‘jump’ into position at the critical point.

    Is there a way to smooth this out?

  • Joshua

    Gracias, aprendí demasiado! excelente pagina web 😀

  • yoyo

    Thanks a lot

  • casajejr

    Hi Jay,

    I tried your code but this page looks like it’s jumping. How do I fix it. And the rest of the site like this one is not scrolling smooth like your demo. Any suggestions?

    • Jayhan Sim

      Hi casa, I checked your site, your homepage nav bar is looking fine. But the contact page, it does not stick?

  • Paul

    Hi Jayhan

    I’m working on this and can’t get it to work:

    The header div id is “header” and my nav bar id is “menu-wrapper”. I’ve put the code in as this (just before the tag):

    $(document).ready(function() {

    //Calculate the height of
    //Use outerHeight() instead of height() if have padding
    var aboveHeight = $('header').outerHeight();

    //when scroll

    //if scrolled down more than the header's height
    if ($(window).scrollTop() > aboveHeight){

    // if yes, add "fixed" class to the
    // add padding top to the #content
    // (value is same as the height of the nav)

    } else {

    // when scroll up or less than aboveHeight,
    // remove the "fixed" class, and the padding-top

    but I just can’t seem to get it working, have I missed something??

    Any help appreciated

  • Pingback: navigation usability — Sticky Menus Are Quicker To Navigate | Smashing UX Design()

  • Pingback: Sticky Menus Are Quicker To Navigate | Smashing Magazine()

  • Casey

    Works like a charm, thanks so much! Strange how it took so long to find something beyond a bare bones css solution. This is probably the best way to get the nav menu to stick if there’s something above it that you want to hide.