Question

很难描述问题。所以，看看这个jsFiddle：

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

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/

Answer 3

我的解决方案，受@ niaccurshi的启发：

不是对填充顶部进行硬编码，而是创建一个不可见的重复元素，它占用相同的空间，但只有在粘贴原始元素时才会生成。

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

在其上方的部分周围添加标题包装。并给包装器最小高度，使其等于这些元素的总和。

示例：

io.vertx.reactivex.core.Vertx

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

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

非常简单整洁的解决方案

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

5 个答案: