To create a sticky effect on the main navigation bar above when a user scrolls passed beyond it. Use below jquery code
jQuery(function(){
var menuOffset = jQuery(‘#site-navigation’)[0].offsetTop;
jQuery(document).bind(‘ready scroll’,function() {
var docScroll = jQuery(document).scrollTop();
if(docScroll >= menuOffset) {
jQuery(‘#site-navigation’).addClass(‘fixed’).css(‘width’,jQuery(‘#masthead’).width());
} else {
jQuery(‘#site-navigation’).removeClass(‘fixed’).removeAttr(“width”);
}
});
});
Fairly basic jQuery code. It will add a class to the navigation when a user scrolls beyond it. Only thing you’ll need to change here is the navigation selector, #site-navigation. Also, you may want to remove .css(‘width’,jQuery(‘#masthead’).width()). That part of the code is more specific to this site.
and include below css code in css file
#site-navigation.fixed{
position:fixed;
z-index: 9999;
top:0;
}
That’s done!!