jquery - Bootstrap 的 "data-offset"在滚动后跳转 - div spacer？

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());