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

Question

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

Answer 1

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

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

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

希望这会让您思考并开始删除一些代码。