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?

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?

• javascript
• jquery
• html
• css
• twitter-bootstrap

• You can create a container around your element. Apply same to the container. Then you can fix your header to top but its parent element will occupy the same height – MayThrow Commented Aug 17, 2015 at 5:40
• I am a it confused as to what you mean – user3550879 Commented Aug 17, 2015 at 6:00
• I added it as an answer – MayThrow Commented Aug 17, 2015 at 6:11

3 Answers 3

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./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>

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

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!