Twitter Bootstrap贴有Navbar - 下面的div跳了起来

Question

很难描述问题.所以,看看这个jsFiddle:

http://jsfiddle.net/xE2m7/

当导航栏固定在顶部时,内容会跳到它下面.

CSS:

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

问题出在哪儿？

Answer 1

这里的问题是没有办法传达导航栏下方导航栏固定到顶部的容器中的其余内容.您可以使用更现代的CSS来实现这一点,但请注意,这不会是旧浏览器的修复(实际上您可能会发现有关postion的问题:旧版浏览器中的固定属性...

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

这等待直到导航栏被修复,然后将填充添加到它的兄弟的容器中,防止它在导航下"跳跃".

Answer 2

您还可以使用Bootstrap附加事件通过CSS类添加和删除相关元素的填充(或边距):

// 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");
});

这是一个JSFiddle:http://jsfiddle.net/mumcmujg/1/