Javascript或Jquery：滚动到固定位置div

Question

我想要一个html div，它将在用户向下滚动页面时滚动，当它的父标签结束时它将到达固定位置。 例如： - 请参阅此链接http://www.9gag.com/他们在一个页面上有很多帖子。 当我们滚动一个帖子并转到第一个帖子的结尾时，标题和共享按钮变为固定位置，然后第二个帖子对下一个帖子执行相同和相同的操作。 就是这样。 我们如何在Jquery或原始javascript或css中执行此操作。

Answer 1

也许你想试试这个插件： http ： //labs.anthonygarand.com/sticky/ Sticky是一个jQuery插件，它让你能够让你的页面上的任何元素始终保持可见达到了极限。

Answer 2

$(window).scrollTop()将为您提供在浏览器中向下滚动的像素数， $('postcontainer').offset()将为您提供帖子容器的x，y位置。

因此，如果将事件绑定到$(window).scroll()或mousescroll，则可以检查postcontainer的offset().top是否小于window.scrollTop 。 如果是，那么您开始相对于邮政容器向下移动项目。 执行此操作时，您需要跟踪柱箱容器的高度和移动元件的高度，以确保它不会越过容器的底部。

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

希望这会让你思考并开始提出一些代码。

Answer 3

这是一个简单的css属性的问题的解决方案。

使用position:sticky跟随滚动。

这是文章解释。

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

这个演示的老方法

与粘性位置演示