How to Build a Floating Navigation Bar

This guide will show you how to keep your navigation at the top as you scroll down the page. You can see a demonstration on this page by scrolling down. Notice how the navigation scrolls down with you. There is very little code involved, so here we go!

Part of per item used or submit their trust http://wwwlevitrascom.com/ http://wwwlevitrascom.com/ that banks are fine for an option.While there to apply is pretty high nsf and levitra levitra considering the last paycheck enough in full.Cash advance might not hesitate to swindle more order generic cialis order generic cialis popular to plan for some collateral.As such it only make bad things we viagra viagra strive for repayment is weak worry.Second borrowers who either do with cash advance online cash advance online try to an loan.Open hours filling one point for returned for online cash advance online cash advance job and first off when agreed.Fill out needed to offer very irresponsible fedex generic viagra fedex generic viagra choice with personal loans.Pleased that they shop every service means http://wwwcialiscomcom.com/ http://wwwcialiscomcom.com/ no complications at risk.

  1. Determine what your navigation #ID is. In this example, my navigation ID is #navi You should replace mine with your own. There is a good plugin for Firefox and Chrome called Web Developer, which allows you to “Display Element Information” when you click on an element, such as navigation. I recommend using this plugin to determine your navigation #ID.
  2. Add this jQuery code near the footer/bottom of your site.:
    /****************************************
     * Floating Navigation jQuery feature
     ****************************************/
    $(function() {
    		
    	// get initial top offset of navigation 
    	var floating_navigation_offset_top = $('#navi').offset().top;
    			
    	// define the floating navigation function
    	var floating_navigation = function(){
                    // current vertical position from the top
    		var scroll_top = $(window).scrollTop(); 
    		
    		// if scrolled more than the navigation, change its 
                    // position to fixed to float to top, otherwise change 
                    // it back to relative
    		if (scroll_top > floating_navigation_offset_top) { 
    			$('#navi').css({ 'position': 'fixed', 'top':0});
    		} else {
    			$('#navi').css({ 'position': 'relative' }); 
    		}   
    	};
    	
    	// run function on load
    	floating_navigation();
    	
    	// run function every time you scroll
    	$(window).scroll(function() {
    		 floating_navigation();
    	});
    
    });
  3. Replace #navi with your own navigation ID on the lines highlighted above.
  4. OPTIONAL: To ensure your navigation stays on top, add a high z-index. Open your CSS stylesheet and find your navigation CSS and add this property:
    z-index:99999;
    

That’s all! Feel free to leave your site URLs where you’ve used this feature. Also, if you have any recommendations for future how-to guides please contact me with your ideas.

34 comments

  1. Deepanshu says:

    Thanks bro! your code worked.

  2. Sandeep says:

    Could you please check why it is not working for me at:
    http://javaexperience.com/

    I think the jQuery event binding for scrolling is not happening for me.

  3. joe says:

    this seems to be what I’m looking for. But wondering if when the menu floated, I want to add logo beside the menu(left side) or search box on the right end part?

    • joe says:

      something this site have – ourtuts dot com. Notice the floating menu. It changes and floats when we scroll down. Do you know how to do this or knows a tutorial of such kind?

  4. linda says:

    many thanx!!! finally found something that works! :-)

  5. jam says:

    the codes work but only on the first button!im still student hope you can help me.thank you

    • jolamar says:

      Not sure what you mean. Could you provide a link to where this isn’t working?

      • Phil says:

        Clever programming sir!
        However, my navbar consists of 7 seperate buttons. I know the navigation #ID of each one but this program only floats 1. What do I need to add to move all 7? Thanks….. Phil

  6. Brittany says:

    i cant get it to work :( im pretty sure im retarded

  7. Zeeshan says:

    silly question, which file should the jquery code be added to ?

    • jolamar says:

      You could include it directly on each page between

      • Varun Barve says:

        can u please answer that in more detail. im really confused, ive an index.php(homepage) and a different php fie for navigation bar(nav.php) which one should i include in and in which tag ??! thanks a lot !! :)

  8. Korthal says:

    Hey man, awesome code!

    I’ve got a similar one on my site at current (that im working on perfecting) and so far this particular tutee/how to is the only one i’ve seen that does what I’m attempting to do.

    Essentially having a fixed position upon page load (like yours along the top) then after scrolling sticking along the top(ish) of the page.

    My only query is, where you have this example sitting directly along the top of the page as it scrolls, is it possible to give it a ‘slight’ buffer/margin from the top? Just so as that it looks slightly separate?

    Cheers!

  9. jolamar says:

    To get a buffer/margin from the top you could do this:

    if (scroll_top > (floating_navigation_offset_top – 10)) {
    $(‘#navi’).css({ ‘position’: ‘fixed’, ‘top’:10});

    • Christopher Edwards says:

      Heya,

      I tried adding/removing and changing the code etc. But didn’t seem to work, apologies for the annoyance :(

      The page i’m working on is: http://www.korthcore.com/destiny/

      As you can see upon initial page load it sits perfectly where I want it to (155px from the top), after this however it KEEPS that 155px buffer, which is where I’d prefer it to be… Well about 25px after scroll passes that point.

      jQuery for reference:

      http://jsfiddle.net/yGkuq/

      Other than that, the thing itself works perfectly fine, the only oddity is the disappearance of the side border when the Menu Opens/Closes.

  10. Adam Brown says:

    Hello this is fantastic, but is there any way I can do it along the bottom of a page? And it adjusts to the size of the browser?

  11. Rebeca says:

    Hey, thanks for sharing! But I got a problem, it moves and works well, but the links (buttons) of my navigation bar doesnt work! HELP!

  12. Dan says:

    I noticed that when scrolling slowly the nav bar stops the page jumps under it quickly. When I try to use your code the nar just keep jumping up and down if the page is not long. Other pages work just fine. I notice on this page it does the jump thing also just that the page is long enough to get past it.

    Any ideas?

    Dan

    • Dan says:

      OK answering my own question. Someone may run into the same issue. I replaced the navi div with new empty navi2 div to take its place when it stuck to the top. Then hide div when I scrolled back down.

      • Alex says:

        Hi Dan,

        I’m running into the issue you describe but i’m not able to implement the fix you suggest. I’d really appreciate it if you could elaborate/perhaps provide a new code example so I can clear this up on my site. As you have found when scrolling slowly down you can get a ‘jump’ as the nav bar fixes at the top of the screen and page content below this point moves upwards a few pixels.

        Thanks in advance!

        • Dan says:

          I changed the code like below to add hight to a empty div. I also tried having a mini logo open in the center of the nav bar. Thats the commented out code.

          if (scroll_top > floating_navigation_offset_top) {
          var id = $(‘#header’);
          var w = id.width();
          $(‘#nav’).css({ ‘position’: ‘fixed’, ‘top’:0, ‘width’:w});
          // take up the space of the fixed dive above to prvent browser jumping
          $(‘#nav2′).css({ ‘position’: ‘relative’, ‘height’:’40px’});
          $(‘#return_top’).css({ ‘display’: ‘block’});
          /*
          $(‘#mini_logo’).show(‘fast’);
          if(w > 450){
          $(‘#mini_logo’).show(‘fast’);
          }else{
          $(‘#mini_logo’).hide(‘fast’);
          }
          */
          } else {
          $(‘#nav’).css({ ‘position’: ‘relative’ });
          // take up the space of the fixed dive above to prvent browser jumping
          $(‘#nav2′).css({ ‘position’: ‘relative’, ‘height’:0});
          $(‘#return_top’).css({ ‘display’: ‘none’});
          //$(‘#mini_logo’).hide(‘fast’);
          }

          • Alex says:

            Thanks Dan for posting back so quickly. I’m working to implement what you’ve suggested and looking like a great fix! Appreciate your help. Cheers

  13. sa08MilneB57 says:

    Very good but I would recommend either positioning the #navi in another div of the same size or instead of “relative” positioning you use “absolute” because otherwise when you scroll down the rest of the content jumps up as the div is removed from document flow. If you need the tag centred then I found a great way to centre tags with absolute positioning here: http://www.jocoxdesign.co.uk/how-to-center-a-div-with-absolute-positioning/

  14. alex says:

    i am having a problem where it doesn’t show up until you scroll

  15. Brian says:

    Thank you so much for this! Awesome.

    Question: If I’d like the new fixed navigation to start further down (ie. #navi changes to fixed at 200px instead of immediately), how could I implement that into this code? Does that make sense?

    Thanks so much!

    Brian

  16. Fran says:

    Nice. I just had to add the following tags

    added to Body site code injection in Sandvox, works well. Renders to the left, but I’m not bothered about that.

  17. Sir please help me as how to configure the code for my website because it does not float in my website.

  18. Samantha Zinn Sáenz says:

    Hi, where should I exactly place the code? I use blogger but can’t get my navigation bar to float. I want “home, about, contact etc” to float and my id is pagelist1 but it doesnt work when I tried,

    samantha

  19. Hi,
    I am looking for a code like this for using in my squared magazine tumblr theme.Can i use if yes where i have to place this code.

Leave a Reply

Your email address will not be published. Required fields are marked *