Make nav bar sticky
10,026
Solution 1
Try this script
jQuery(document).scroll(function() {
if (jQuery(this).scrollTop() > 175) {
jQuery('.menu-secondary-wrap').css({
'position': 'fixed',
'top': '0',
'width': '950px'
});
}
else {
jQuery('.menu-secondary-wrap').css('position','static');
}
});
Solution 2
Use something like this (you can check it in browser console F12)
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 220) {
jQuery(".menu-secondary-wrap").css({"position": "fixed", "top": 0, "width": "950px"});
} else {
jQuery(".menu-secondary-wrap").removeAttr("style");
}
});
Works completly fine
Author by
Mario Parra
Updated on June 13, 2022Comments
-
Mario Parra about 2 years
guys,
I have a nav bar on my website (http://www.mtscollective.com - 'menu-secondary-wrap') and I'm trying to make it stay at the top of the page when the user scrolls down.
I've tested several jQuery samples (such as http://www.hongkiat.com/blog/css-sticky-position/), but they always come with their own CSS, which seems to interfere with what I'm already using.
What's the easiest/best way to do this for an existing class?
Thanks! Mario