the Forum

Creating a Sticky Navigation with jQuery and CSS

Posted on April 10, 2014 by Michael Rosario
Total Posts: 33  |  Join date: 03-12-11

First let's examine a fixed nav. You can easily convert any navigation to a fixed nav simply by adding the following:
#yourNav { position: fixed; top: 0px; z-index: 9999; } 
The fixed position allows the element to be positioned based on the window - in our case, top at zero. The z-index should be set to a high number so that the navigation will be the top "layer." For a sticky nav, we need a way to turn on/off the fixed positioning - we do this using jquery. See example nav:
<div class="navcontainer">
       <
nav id="yourNav">
            <
ul>...
       </
nav>
</
div
We follow that with the following CSS:
.navcontainer #yourNav { position: relative; }
.navcontainer.Sticky #yourNav { position: fixed; top: 0px; z-index: 9999; } 
So, the nav is only sticky when the navcontainer has a "Sticky" class. Now, let's use jQuery:
/* Sticky Navigation */
     
var sticky = $(".navcontainer").position(); // Get the position on load
     
$(window).scroll( function(){
         sticky 
= $(".navcontainer").position();  // Get the position on scroll
         
if($(window).scrollTop()>=sticky.top)
             
if($(".navcontainer").hasClass("Sticky"))// Check if it has the class
             
else {
                     
$(".navcontainer").addClass("Sticky");  
             
}
         }
;        
         if($(
".navcontainer").scrollTop()<sticky.top)// Remove class
             
$(".navcontainer").removeClass("Sticky"); 
         
}
     }
); 
We use the code above to remove/add the "Sticky" class to the "navcontainer" class.

Tags: css, jquery, navigation

There are no answers yet.  Add yours below.

add your answers here
comments powered by Disqus