JavaScript或jQuery：滚动到固定位置的Div

Question

我想要一个HTML div，当用户向下滚动页面时，它将滚动，并在其父标记结束时到达固定位置。例如：查看此链接http://www.9gag.com/，他们在同一页上有很多帖子。当我们滚动一个帖子并到达第一个帖子的末尾时，标题和分享按钮变为固定位置，然后第二个帖子也会这样做，接下来的帖子也是如此。完全像那样。我们如何在Jquery或原始JavaScript或CSS中实现这一点。

- John Preston

Answer 1

也许你想试试这个插件：http://labs.anthonygarand.com/sticky/。Sticky是一个jQuery插件，可以让页面上的任何元素始终保持可见状态，当元素到达指定位置时，通过浮动实现。请注意保留html标记。

- Taufik Nurrohman

Answer 2

$(window).scrollTop()会返回浏览器向下滚动的像素数，$('postcontainer').offset()会给出帖子容器的x、y位置。

因此，如果将事件绑定到$(window).scroll()或鼠标滚轮上，则可以检查postcontainer的offset().top是否小于window.scrollTop。如果是，则开始相对于帖子容器向下移动该项。在执行此操作时，需要跟踪帖子容器的高度和移动元素的高度，以确保它不会超过容器底部。

因此，如果postcontainer.height - movingelement.position().top >= movingelement.height()，则需要固定移动元素的位置。向上滚动时请执行相反的操作。

希望这能让您思考并开始编写一些代码。

- Rob

---

请您能否提供至少一个例子。 - John Preston

Answer 3

这是解决您问题的简单CSS属性的解决方案。

使用position:sticky来跟随滚动。

以下是详细说明的文章。

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

以前的做法是 演示

现在可以使用 粘性定位演示

- kongaraju