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?

Rajewski

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.

Philbin

Thanks that worked! Your are indeed correct that it looks pretty weird on IE8 for example. Gonna look for some hacky fix... – Rajewski

This worked in a similar issue I had except it was none bootstrap related. Thanks man! – Maffei

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/

Emptor

Good solution, I like it. – Airport

This is a solid solution but I'd rather consider affixed.bs.affix and affixed-top.bs.affix events, so that it would trigger only once during every transition. – Medial

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;
}

Lepto

This is a neat solution, though it may be worth doing what you can to set ARIA properties on the duplicated header bar so as to ensure screen readers ignore it (and don't read through what's in your header bar twice) – Philbin

I really like this. It avoid needing to figure out the amount of padding-top needed – Krystin

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>

Preemption

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

Plump