Lil Josh

How to Build a Floating Navigation Bar

July 21, 2012

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.

fixed navigation floating navigation scrolling navigation sticky navigation