Bootstrap Affix Nav Causes Div Below To Jump Up

Question

I've created a JSFiddle using Bootstrap's affix function to make a nav stay at the top of the screen once you scroll down and the header moves out of view.

The problem I'm having is that when using pure HTML, the text below the nav jumps up and hides behind the nav too early.

Check out the problematic code here.

Here's the code I used:

<div class="container">
<div class="row">
    <div class="span12">
        <div class="well">
            <h1>Banner</h1>
        </div>
    </div>
</div>
</div>
<div class="nav-wrapper">
<div class="nav navbar affix" data-spy="affix" data-offset-top="120">
    <div class="navbar-inner">
        <div class="container">
            <div class="span12">
                <a class="brand" href="#">My Brand</a>
                <span class="navbar-text">
                    This is a navbar.
                </span>
            </div>    
        </div>
    </div>
</div>
</div>
<div class="container">
<div class="span3">
    <h2>some lorem ipsum for scrolling:</h2>
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
</div>

The CSS is as follows:

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

I found a very similar problem here but when using the code as in that example, for some reason it doesn't work for me.

The extra piece of CSS that did the trick is as follows:

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

I'm also aware of JavaScript solutions such as this one here which uses the following code to create the desired effect:

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

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

I'm just trying to figure out why my particular HTML-only version is not behaving when implementing the previous fix using the CSS padding-top fix.

Thank you in advance for your assistance.

Answer 1

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.