Bootstrap-Affix: Div Underneath Affix "Jumps" to Top. How to Make It Smoothly Scroll Behind

bootstrap-affix : Div underneath affix jumps to top. How do I make it smoothly scroll behind?

What happens in your code is the row at the top changes its position to fixed when its offset to the top is smaller then 60px. The consequence is that it stops to consume any space above the next row.

In the jsfiddle you introduced there is a JS code you should understand and should help you.
This one is for you:

$('#nav-wrapper').height($("#nav").height());

It requires your header to be placed yet inside another div (class called nav-wrapper in fiddle). JQuery code above sets its height based on row height during initialization of the page. The height stays the same even if the top row disappears (of getting fixed).

Another part of the JS code:

$('#nav').affix({
    offset: $('#nav').position()
});

makes you independent of the size of space above the top row, but in your case I think you do not need it (you can predict it always takes 60px).

Bootstrap Affix Nav Causes Div Below To Jump Up

This seems to work:

.nav-wrapper
{
    min-height:50px;
}

Updated jsFiddle: http://jsfiddle.net/yYE62/5/

What's happening is that the affix plugin makes the element with the .affix class have a fixed position in the document. This removes the affixed element from the flow (or layout, if you prefer) and causes the container to collapse. When that happens, the content below slides up to fill the space that the affixed element used to occupy.

By adding the rule above, you tell that container to maintain a minimum height regardless of whether it has content or not. It doesn't have to be 50px; that's the default height of .navbar, so adjust to match your needs. If you don't want all .nav-wrappers to have a minimum height, assign an id and use that instead.

Twitter Bootstrap Affixed Navbar - div below jumps up

The problem here is that there is no way communicated to the rest of the content in the container below the nav that the nav bar has been fixed to the top. You can achieve this using more modern CSS, but be aware that this won't be a fix for older browsers (and indeed there are issues you may find with postion:fixed properties in older browsers too...

.affix + .container {
    padding-top:50px
}

This waits until the nav bar is fixed, and then adds padding to the container that is it's sibling, keeping it from "jumping" under the nav.

bootstrap menu top affix

You need to apply the z-index to the #nav not the .nav-wrapper:

#nav { 
  position: relative;
  z-index: 2; 
}

Demo:
http://jsfiddle.net/t7pL3/

Bootstrap's data-offset jumps after scroll - div spacer?

The problem is the <div id="nav" ...> "disappears" when it is fixed. When the element changes position from static to fixed, then it does not takes the space in your layout anymore. As the result everything below moves up for the same distance as the height of the fixed element. Standard solution is to contain the element in yet another <div id="nav-wrapper"> with the height exactly the same as affixed, so when <div id="nav" ...> disappears nav-wrapper does not change the size.

<div id="nav-wrapper">
  <div id="nav" ...>
    ...
  </div>
</div>

#nav-wrapper {
  height: 100px;
}

In case you cannot predict the height of the nav-bar, use the following jQuery snippet:

$('#nav-wrapper').height($("#nav").height());

Bootstrap + Affix : affixed menu jumps off screen

When playing around a little bit more, I realized that it works when I add position: relative to .affix-top. I suppose without that, the javascript was not sure where to "anchor" the element, and pushed it off screen. I have updated the fiddle accordingly.

Bootstrap Affix on bottom scroll glitch (Chrome and Firefox)

You can offset the .content div when the header has the .affix class is applied:

.header2.affix + .content {
  margin-top: 82px;
}

Tested in FF32 and CH37 (Don't have IE9 VM on this PC, sorry)

Demo: http://jsbin.com/cimobirimisi/15/

Some Background:

The issue is that once the .affix class is applied, the .header2 div inherits position: fixed. This brings the .header.affix div out of its place in the DOM causing the .content div to immediately snap to the top of the page and be hidden beneath (the now fixed) .header2 div.

How to stop content from jumping after navbar becomes fixed on scroll?

Try this,

$(function() {  var distance = $('.desktop-nav').offset().top,    $window = $(window);    $window.scroll(function() {    var dh = $('.desktop-nav').height();    $('.desktop-nav').toggleClass('fixedtop', $window.scrollTop() >= distance, "easeOutSine");    if($('.desktop-nav').hasClass('fixedtop')){      $('body').css('margin-top', dh+dh );    }else{      $('body').css('margin-top', 0 );    }  });});

body{margin:0;  } ul {        text-align: center;        padding-top: 20px;        padding-bottom: 15px;        padding-left: 0;        background-color: white;    }    .fixedtop {        position: fixed;        top: 0;        width: 100%;        background-color: white;        /* height: 50px; */        box-shadow: 0 5px 60px rgba(0,0,0,0.08);        margin-top: 0px;    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="desktop-head">        <img class="desktop-logo" src="img/logo.png" alt="Sample Image">        <ul class="desktop-nav">            <li><a href="index.html" class="active">PORTFOLIO</a></li>                      <li><a href="#">ABOUT ME</a></li>            <li><a href="#">RESUME</a></li>            <li><a href="#">CONTACT</a></li>        </ul>    </div>
    <div id="portfolio">      <pre>      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      stackoverflow      </pre>    </div>