Make nav bar sticky

Question

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

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

Answer 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

Answer 3

The easiest way to do this is to make your header wrapper have fixed positioning and a higher z-index than the wrapper for the rest of your sites content...

Example:

.header-wrapper {
    width: 100%;
    height: 80px;
    position: fixed;
    z-index: 20;
}

.content-wrapper {
   width: 100%;
   margin-top: 80px; // height of header wrapper.
   z-index: 10;
}

Then your HTML might look like:

<div class="header-wrapper">the header</div>
<div class="content-wrapper">the content</div>

Hope this helps.

Answer 4

If you want a simple solution. Apply position: fixed to an element

body {
  padding-top: 50px;
}

/* Header span-24, could not find a proper identifier for it */
.span-24 {
    position: fixed;
    z-index: 99;
    background: #000;
    top: 0;
}