Question

我正在使用Bootstraps数据间谍和数据偏移，以便在向下滚动页面后将部分网站标题保留在顶部。问题是，在到达数据偏移点并变为“附加”到顶部后，似乎页面跳转。我知道它实际上并没有跳跃，页面内容的其余部分仅仅是固定导航的背后。我试图为导航部分的高度添加一个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());

在scroll-div spacer之后引导“数据偏移”跳转？

1 个答案: