Bootstrap的“数据偏移量”跳转后滚动- div间隔？

Question

我使用Bootstraps、data-spy和data-offset在向下滚动页面后将站点标题的一部分保留在顶部。问题是，在到达数据偏移点后，页面看起来就像跳转一样。我知道这不是真正的跳转，页面内容的其余部分只是在固定的导航后面。我已经尝试添加一个div间隔符的导航部分的高度，坚持，但不能实现这个位，所以它出现在同一时间的数据偏移。

            <div data-spy="affix" data-offset-top="96" id="nav">

看看我的例子。慢慢地滚动，你会注意到内容似乎在固定的标题后面。https://googledrive.com/host/0B8UWGEiox1HOOUJhU0xndzBBZ00/test_20062013_Rudge.html

Answer 1

问题是<div id="nav" ...>在修复后会“消失”。当元素的位置从静态更改为固定时，它将不再占用布局中的空间。因此，下面的一切都会向上移动与固定元素的高度相同的距离。标准的解决方案是将元素包含在另一个<div id="nav-wrapper">中，其高度与附加的高度完全相同，因此当<div id="nav" ...>消失时，nav-wrapper不会更改大小。

<div id="nav-wrapper">
  <div id="nav" ...>
    ...
  </div>
</div>

#nav-wrapper {
  height: 100px;
}

如果您无法预测导航栏的高度，请使用以下jQuery代码片段：

$('#nav-wrapper').height($("#nav").height());