当页面向下滚动时固定一个div，然后取消固定

Question

3

我正在尝试将侧边栏div放置在标题部分下方，当您向下滚动时，它将变成固定的div，并保持固定直到页面底部，一旦到达页脚部分，它将粘附在顶部并允许我向下滚动页脚区域而不再看到它。

这个网站http://madebymany.com/blog/apples-aesthetic-dichotomy有一个完美的示例，左列随着滚动而固定，然后在底部取消固定。

我正在寻找一种好的方法来实现这一点，希望有一个示例或教程，我意识到它是通过改变div属性的javascript完成的。我已经尝试搜索，但我找到的都是过时的文章，大多数都是5-6年前的，只完成了一半的工作。我甚至不确定该功能叫什么？

- JasonDavis

2个回答

0

你基本上需要处理页面的 scroll 事件并移动框。

大多数教程都需要使用 jQuery，请熟悉它。如果你需要一个教程，这里有一个可行的：http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/。

为什么不也分析一下那个网站的代码呢？

- Blender

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Richard JP Le Guen · Accepted Answer

那个网站正在使用jQuery Scroll Follow。

请注意根据jQuery Scoll Follow网站的说明...

滚动跟随对象将保持在其直接容器内。

...这就是为什么在您的示例网站上评论之前停止滚动的原因；页面上滚动的元素受限于其父级<aside>元素。您可以查看示例。