How to Build a Floating Navigation Bar

Posted by:

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!

  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.:
    [code lang=”js” highlight=”7,18,20″]
    /****************************************
    * 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:
    [code lang=”css”]
    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.

35

About the Author:

  Related Posts
  • No related posts found.

Comments

  1. Deepanshu  September 16, 2012

    Thanks bro! your code worked.

    reply
  2. Sandeep  September 29, 2012

    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.

    reply
  3. joe  October 13, 2012

    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?

    reply
    • joe  October 13, 2012

      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?

      reply
  4. linda  October 29, 2012

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

    reply
  5. jam  January 16, 2013

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

    reply
    • jolamar  January 27, 2013

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

      reply
      • Phil  April 11, 2013

        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

        reply
        • John  April 20, 2013

          Wrap all the seperate buttons in one div.
          e.g.

          Then use “Navbar” as the id.

          reply
          • Phil  May 9, 2013

            Sorry, I don’t know what you mean. I’m no good at this type of programming. Can you explain further?

  6. Brittany  January 21, 2013

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

    reply
  7. Zeeshan  January 27, 2013

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

    reply
    • jolamar  January 27, 2013

      You could include it directly on each page between

      reply
      • Varun Barve  October 28, 2013

        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 !! :)

        reply
  8. Korthal  February 6, 2013

    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!

    reply
  9. jolamar  February 6, 2013

    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});

    reply
    • Christopher Edwards  February 27, 2013

      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.

      reply
  10. Adam Brown  February 6, 2013

    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?

    reply
  11. Rebeca  February 11, 2013

    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!

    reply
    • jolamar  February 15, 2013

      What do you mean by “doesn’t work”? Do they not go to other pages when clicked? What’s your URL so we can see?

      reply
      • Rebeca  February 18, 2013

        Here is it! http://rebecalovesvanilla.blogspot.com/

        reply
        • jolamar  February 19, 2013

          It turned out to be a z-index issue. In the javascript replace:

          $(‘.tabs-outer’).css({ ‘position': ‘fixed’, ‘top':0});

          with:

          $(‘.tabs-outer’).css({ ‘position': ‘fixed’, ‘z-index': 999999, ‘top':0});

          reply
  12. Dan  March 1, 2013

    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

    reply
    • Dan  March 28, 2013

      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.

      reply
      • Alex  June 3, 2013

        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!

        reply
        • Dan  June 3, 2013

          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’);
          }

          reply
          • Alex  June 4, 2013

            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  March 6, 2013

    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/

    reply
  14. alex  March 27, 2013

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

    reply
  15. Brian  April 8, 2013

    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

    reply
  16. Fran  April 16, 2013

    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.

    reply
  17. Magson Fernandes  May 8, 2013

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

    reply
  18. Samantha Zinn Sáenz  November 3, 2013

    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

    reply
  19. Andrew Richard  January 11, 2014

    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.

    reply
  20. Afifah Nabilah  March 1, 2014

    Hi there!
    I use this code of yours on my website and it’s working! Nice one. But, there is a problem. the fixed widget will scroll till the bottom of my page and it makes the page look ugly when reaching the bottom of the page. SO, is there any solution to stop the fixed object at the footer of the page.
    I don’t want it to scroll over the footer, so I need it to stop about 200px (or so) above the footer.

    Is that possible to do like that?

    Anyway, this is the link to that page: http://royalsapphires.blogspot.com/search/label/product

    reply

Add a Comment