jquery - 固定位置侧边导航下平滑滚动内容

Question

我在固定位置侧导航下平滑滚动内容时遇到问题。当用户向下滚动到我的侧边导航顶部时，它会变成固定的。问题是固定导航下方的内容会跳转到页面顶部，而不是在固定导航下方滚动。

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

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

我需要添加什么代码来完成这个？

Answer 1

当您应用position:fixed时，它会将 sidenav 从文档流中“提升”出来，导致下面的内容跳起来填补空白。为了防止这种情况，只需插入一个占用空间的空元素（并在切换到 时再次删除它position:relative）。

请参阅修改后的演示：http: //jsfiddle.net/7GfQ2/4/。

---

注意，我的演示只是展示了基本概念，我很懒。在更改任何 css 属性或添加/删除元素之前，您应该从 DOM 中读取所有变量并缓存它们。目前，当它在从 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有一种非常快速的方法来做你想做的事情。在 SO 上的这个线程中，所有学分都归 @bigspotteddog 提供。