固定位置侧边导航下平滑滚动内容答案

【问题标题】：Scroll content smoothly under fixed position side navigation固定位置侧边导航下平滑滚动内容
【发布时间】：2011-06-07 23:24:46
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

查看修改后的演示：http://jsfiddle.net/7GfQ2/4/。

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

【讨论】：

【解决方案2】：

这行得通：

当 sidenav 固定时。

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

当 sidenav 是相对的时

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

【讨论】：

【解决方案3】：

使用 jQuery

使用jQuery ScrollToFixed 可以快速完成您想做的事情。所有功劳都归于@bigspotteddog 这个thread on SO。

【讨论】：