My website is /

I just have an easy sticky.js that fixes the navbar on scroll, but the content below the nav jumps up below the nav bar. Any idea how to fix this?

jQuery(function(){
  var menuOffset = jQuery('.menu-wrapper')[0].offsetTop;
  jQuery(document).bind('ready scroll',function() {
    var docScroll = jQuery(document).scrollTop();
    if(docScroll >= menuOffset) {
      jQuery('.menu-wrapper').addClass('fixed');
    } else {
      jQuery('.menu-wrapper').removeClass('fixed').removeAttr("width");
    }
   });
});

seems like its suppose to be an easy fix. I tried using jQuery .next() to put the margin-top of the next .css after the nav to fit just under the nav like it should. any other bright ideas?

My website is http://southsideonline./

I just have an easy sticky.js that fixes the navbar on scroll, but the content below the nav jumps up below the nav bar. Any idea how to fix this?

jQuery(function(){
  var menuOffset = jQuery('.menu-wrapper')[0].offsetTop;
  jQuery(document).bind('ready scroll',function() {
    var docScroll = jQuery(document).scrollTop();
    if(docScroll >= menuOffset) {
      jQuery('.menu-wrapper').addClass('fixed');
    } else {
      jQuery('.menu-wrapper').removeClass('fixed').removeAttr("width");
    }
   });
});

seems like its suppose to be an easy fix. I tried using jQuery .next() to put the margin-top of the next .css after the nav to fit just under the nav like it should. any other bright ideas?

• javascript
• jquery
• navigation
• sticky

• What do you mean by the content below the nav jumps up below the nav bar? Are you referring that the content goes beneath the nav bar as you scroll? I don't see anything unusual on Chrome 36. – John Commented Jul 25, 2014 at 19:57
• What browser are you using that you see this? – Colin DeClue Commented Jul 25, 2014 at 20:09
• Nevermind I understand your question now. I can see the problem – John Commented Jul 25, 2014 at 20:28

4 Answers 4

Wrap your <div class="menu-wrapper" id="menu-wrapper"> by another div (placeholder) and set height to 84px by CSS (equals to fixed menu height) or using JS. You've met this problem because fixed elements excluded from position calculation.

After your navigation bees sticky / fixed, the rest of the layout moves up on the page to fill the space that the navigation was when it was relatively positioned ( or with flow initially).

Add a static height to your header, so it doesn't shrinks when the navigation bar gets out of the flow, something like this:

header { height: 117px; }

That worked for me.

I had a problem with an alignment of a container (300px centre with border) which supposed to be fixed. After the content reached the container it jumped slightly ( around 2-5 px right ). I managed to respolve it by putting 0 margin and padding on the body in css).