14

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?

madth3
  • 7,275
  • 12
  • 50
  • 74
deekay
  • 607
  • 2
  • 9
  • 17

5 Answers5

21

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.

niaccurshi
  • 1,265
  • 9
  • 9
  • Thanks that worked! Your are indeed correct that it looks pretty weird on IE8 for example. Gonna look for some hacky fix... – deekay Mar 03 '13 at 10:39
  • This worked in a similar issue I had except it was none bootstrap related. Thanks man! – Binary101010 Jan 04 '14 at 03:56
5

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/

russellb
  • 315
  • 3
  • 9
4

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;
}
Henrik N
  • 15,786
  • 5
  • 82
  • 131
  • 2
    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) – niaccurshi Jan 15 '14 at 10:19
  • I really like this. It avoid needing to figure out the amount of padding-top needed – Scribblemacher Jul 13 '17 at 19:14
1

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>
user3108698
  • 681
  • 3
  • 8
  • 22
1

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

Meint-Willem Gaasbeek
  • 63
  • 5