在固定位置侧导航下平滑滚动内容

Question

我在固定位置侧导航下顺畅滚动内容时遇到问题。 当用户向下滚动到我的侧面导航的顶部时，它将变为固定。问题是固定导航下面的内容跳转到页面顶部而不是在固定导航下滚动。

这是我的代码：http://jsfiddle.net/grjopa/7GfQ2/1/

在这个代码示例中，我需要＃sidenav-bottom div在固定位置#sidenav div下平滑滚动。

我需要添加哪些代码才能完成此操作？

Answer 1

当您应用position:fixed时，它会“抬起”侧边的文件流，导致下面的内容跳起来填补空白。为了防止这种情况，只需插入占据空间的空元素（并在切换到position:relative时再次将其删除）。

见修订版演示：http://jsfiddle.net/7GfQ2/4/。

---

注意，我的演示只显示了基本概念，而且我很懒。您应该从DOM中读取所有变量并在更改任何css属性或添加/删除元素之前对其进行缓存。目前，它正在导致不必要的页面重排（在潜在的性能关键部分），因为它在从DOM读取和修改DOM之间切换。

Answer 2

这有效：

http://jsfiddle.net/7GfQ2/6/

当sidenav被修复时。

$('#sidenav-bottom').css('margin-top',$('#sidenav').height()+20);

当sidenav是相对的时候

$('#sidenav-bottom').css('margin-top','10px');

Answer 3

使用jQuery

使用jQuery ScrollToFixed可以非常快速地执行您想要的操作。所有学分都归{@ 3}}中的@bigspotteddog所有。