Search code examples
jqueryhtmlcsssticky

Make nav bar sticky

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

Solution

  • 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');
    }
});