0

向下滚动页面后，我正在使用 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

4

1 回答 1

2

问题<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());
于 2013-06-21T16:27:25.327 回答