jquery - Twitter Bootstrap 附加导航栏 - 下面的 div 跳起来

Question

比较难描述问题。所以看看这个jsFiddle：

http://jsfiddle.net/xE2m7/

当导航栏固定到顶部时，内容会跳到它下面。

CSS：

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

哪里有问题？

Answer 1

这里的问题是，无法将导航栏固定到顶部的导航栏下方的容器中的其余内容传达给其他内容。您可以使用更现代的 CSS 来实现这一点，但请注意，这不会是旧浏览器的修复程序（实际上，您可能会发现 postion:fixed 属性在旧浏览器中也存在问题......

.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/

Answer 3

我的解决方案受@niacurshi 的启发：

与其硬编码一个 padding-top，不如创建一个不可见的重复元素，它占用相同的空间，但仅在原始元素被附加时。

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

如果您想避免重复的内容，另一种选择。

<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

在其上方的部分周围添加标题包装器。并给包装器一个等于这些元素组合高度的最小高度。

例子：

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

两个元素的高度 36 + 80 = 116 。标题包装器的最小高度应为 116 像素，请参阅：

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

非常简单整洁的解决方案