Twitter Bootstrap Affixed Navbar - div below jumps up

Question

Rather hard to describe the problem. So just look at this jsFiddle:

http://jsfiddle.net/xE2m7/

When the navbar gets fixed to the top the content jumps below it.

CSS:

.affix {
    position: fixed;
    top: 0px;
}
#above-top {
    height: 100px;
    background: black;
}

Where is the problem?

Answer 1

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.

Answer 2

You can also use Bootstrap affix events to add and remove padding (or margin) from the relevant element via CSS classes:

// add padding or margin when element is affixed
$("#navbar").on("affix.bs.affix", function() {
  return $("#main").addClass("padded");
});

// remove it when unaffixed
$("#navbar").on("affix-top.bs.affix", function() {
  return $("#main").removeClass("padded");
});

Here's a JSFiddle: http://jsfiddle.net/mumcmujg/1/

Answer 3

My solution, inspired by @niaccurshi's:

Instead of hard-coding a padding-top, create an invisible duplicate element that takes up the same amount of space, but only while the original element is affixed.

JS:

var $submenu = $(".submenu");

// To account for the affixed submenu being pulled out of the content flow.
var $placeholder = $submenu.clone().addClass("affix-placeholder");
$submenu.after($placeholder);

$submenu.affix(…);

CSS:

.affix-placeholder {
  /* Doesn't take up space in the content flow initially. */
  display: none;
}

.affix + .affix-placeholder {
  /* Once we affix the submenu, it *does* take up space in the content flow. But keep it invisible. */
  display: block;
  visibility: hidden;
}

Answer 4

An alternative, if you want to avoid duplicate content.

<script>
    jQuery(document).ready(function(){
        jQuery("<div class='affix-placeholder'></div>").insertAfter(".submenu:last");
    });
</script>

<style>
.affix-placeholder {
  display: none;
}
.affix + .affix-placeholder {
  display: block;
  visibility: hidden;
  height: /* same as your affix element */;
  width: 100%;
  overflow: auto;
}
</style>

Answer 5

Add a header wrapper around the sections above it. And give the wrapper a min-height equal to the height of these elements combined.

Example:

<div class="header-wrapper" >
   <div class="topbar" >this bar is 36 pixels high</div>
   <div class="menubar">this menubar has a height of 80 pixels</div>
</div>

<div class="" >Your container moving upwards after the affix element becomes fixed</div>

The height of both elements 36 + 80 = 116 . The min height of the header wrapper therefor should be 116 pixels, see:

.header-wrapper {
  min-height: 116px;
}

Very simple and neat solution