在固定位置侧边导航下平滑滚动内容
我在固定位置侧面导航下平滑滚动内容时遇到问题。 当用户向下滚动到侧面导航的顶部时，它就会固定。问题是固定导航下方的内容跳转到页面顶部，而不是在固定导航下方滚动。
这是我的代码： http://jsfiddle.net/grjopa/7GfQ2/1/
在在此代码示例中，我需要 #sidenav-bottom div 在固定位置 #sidenav div 下平滑滚动。
我需要添加什么代码才能完成此操作？
I am having a problem with scrolling content smoothly under my fixed position side navigation.
When the user scrolls down to the top of my side navigation it becomes fixed. The problem is the content below the fixed navigation jumps to the top of the page instead of scrolling under the fixed nav.
Here is my code: http://jsfiddle.net/grjopa/7GfQ2/1/
In this code example I need the #sidenav-bottom div to scroll smoothly under the fixed position #sidenav div.
What code do I need to add to accomplish this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
当您应用
position:fixed时，它将侧导航从文档流中“提升”出来，导致下面的内容向上跳跃以填补空白。为了防止这种情况，只需插入一个占用空间的空元素（并在切换到position:relative时再次删除它）。请参阅修改后的演示：http://jsfiddle.net/7GfQ2/4/。
注意，我的演示只展示了基本概念，我很懒。在更改任何 css 属性或添加/删除元素之前，您应该从 DOM 读取所有变量并缓存它们。目前，当它在读取 DOM 和修改 DOM 之间切换时，它会导致不必要的页面回流（在潜在的性能关键部分）。
When you apply
position:fixed, it "lifts" the sidenav out of the document flow, causing the content below to jump up to fill the gap. To prevent this, simply insert an empty element that takes up the space (and remove it again, when switching toposition:relative).See ammended demo: http://jsfiddle.net/7GfQ2/4/.
Note, my demo just shows the basic concept, and I was lazy. You should read all your variables from the DOM and cache them before changing any css properties or adding/removing elements. Currently, it is causing unnecessary page reflows (in a potentially performance-critical section) as it switches between reading from the DOM and modifying the DOM.
这有效：
http://jsfiddle.net/7GfQ2/6/
当 sidenav 修复时。
当 sidenav 是相对的时
This works :
http://jsfiddle.net/7GfQ2/6/
when sidenav is fixed.
when sidenav is relative
使用 jQuery
有一种非常快速的方法可以使用 jQuery ScrollToFixed 来完成您想要的操作。所有积分均归@bigspotteddog SO 上的线程。
Using jQuery
There is a very quick way to do what you want using jQuery ScrollToFixed. All credits go to @bigspotteddog in this thread on SO.