滚动后引导的“数据偏移”跳跃 - div 间隔？答案

【问题标题】：Bootstrap's "data-offset" jumps after scroll - div spacer?滚动后引导的“数据偏移”跳跃 - div 间隔？
【发布时间】：2013-06-21 14:46:47
【问题描述】：

向下滚动页面后，我正在使用 Bootstraps 数据间谍和数据偏移量将部分网站标题保留在顶部。问题是，在到达数据偏移点并“固定”到顶部之后，页面似乎会跳转。我知道它实际上并没有跳跃，页面内容的其余部分只是在固定导航的后面。我试图为粘贴的导航部分的高度添加一个 div 间隔，但是无法实现此位，因此它与数据偏移同时出现。

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

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

【问题讨论】：

所以你是说你想在向下滚动时看到导航栏后面的文字？
当屏幕顶部碰到紫色条时，您会失去下面的 76px（缩略图）。它需要更像这样happycog.com 工作，他们有一个 div 间隔，但我的生活无法弄清楚如何使用它。

标签： jquery html css twitter-bootstrap

【解决方案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 sn-p：

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

【讨论】：