Posted on April 10, 2014 by Michael Rosario
Total Posts: 33 | Join date: 03-12-11
#yourNav { position: fixed; top: 0px; z-index: 9999; }
<div class="navcontainer">
<nav id="yourNav">
<ul>...
</nav>
</div>
.navcontainer #yourNav { position: relative; }
.navcontainer.Sticky #yourNav { position: fixed; top: 0px; z-index: 9999; }
/* 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");
}
});
Tags: There are no tags for this entry.