stopping content from 'jumping' when navbar fixes to top of screen

Question

I have a site that utilizes the Bootstrap 3 navbar. It is positioned 280px below a block div and sticks to the top of the page when scrolled to that point

HTML ( in < head > tags )

<script>
  $(document).ready(function() {
  var s = $("#nav");
  var pos = s.position();                    
  $(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    if (windowpos >= pos.top) {
        s.addClass("stick");
    } else {
        s.removeClass("stick"); 
    }
  });
});

HTML

<div id="nav">
  <div class="navbar navbar-default navbar-static">
     <!-- .btn-navbar is used as the toggle for collapsed navbar content -->

...

CSS

header {
  height:280px;
}

.stick {
  position:fixed;
  top:0px;
  width: 100%;
}

It sticks to the page when it's scrolled to the way it's supposed to. BUT when the 'nav' div gets the position:fixed attribute applied, it no longer is in the content flow and the content 'jumps' up the same height as the height of the nav.

How can I keep the content from jumping?

Answer 1

Create a wrapping element around your header. Apply same height to the wrapper. Now if you make your header fixed, the wrapper element will still be there, occupying the same height

here's an example

  $(document).ready(function() { var s = $("#nav"); var pos = s.position(); $(window).scroll(function() { var windowpos = $(window).scrollTop(); if (windowpos >= pos.top) { s.addClass("stick"); } else { s.removeClass("stick"); } }); }); 

 body {margin:0} #nav, .nav-wrapper { height:100px; background: gray; } .stick { position:fixed; top:0px; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> <div class="nav-wrapper"> <div id="nav"> <div class="navbar navbar-default navbar-static">Header</div> </div> </div> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> 

Answer 2

Don't create a custom class like sticky for it use navbar-fixed-top class like,

if (windowpos >= pos.top) {
    s.addClass("navbar-fixed-top");
} else {
    s.removeClass("navbar-fixed-top"); 
}

Refer

Answer 3

I had this issue too recently. I solved it by putting a position:absolute div behind my nav and using that as my scroll point reference for the addClass. Honestly I'm not quite sure why it worked, but it did!