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

Question

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

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

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

我需要添加什么代码才能完成此操作？

Answer 1

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

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

<小时/>

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