Javascript 或 Jquery：滚动到固定位置 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9780042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript or Jquery: Scroll to Fixed position div
提问by John Preston
I want a html div which will scroll when user scroll down the page and it will get to fixed position when it's parent tag ends. For example:- See this link http://www.9gag.com/they have alot to posts on one page. When we scroll one post and go to end of the first post, the title and share buttons become to fixed position and then the second post do the same and same for the next posts. Just exactly like that. How can we do this in Jquery or raw javascript or in css.
我想要一个 html div，当用户向下滚动页面时它会滚动，当它的父标签结束时它将到达固定位置。例如：- 请参阅此链接http://www.9gag.com/他们在一页上有很多帖子。当我们滚动一个帖子并转到第一个帖子的末尾时，标题和分享按钮变为固定位置，然后第二个帖子对下一个帖子做同样的事情。就像那样。我们如何在 Jquery 或原始 javascript 或 css 中执行此操作。
回答by Taufik Nurrohman
Maybe you want to try this plugin: http://labs.anthonygarand.com/sticky/Sticky is a jQuery plugin that gives you the ability to make any element on your page always stay visible by making the element to be floated when they has reached the limit.
也许你想试试这个插件：http: //labs.anthonygarand.com/sticky/Sticky 是一个 jQuery 插件，它让你能够让页面上的任何元素始终保持可见达到了极限。
回答by Rob
$(window).scrollTop()will give you the number of pixels scrolled down in the browser, $('postcontainer').offset()will give you the x,y positions of a post container.
$(window).scrollTop()会给你在浏览器中向下滚动的像素数，$('postcontainer').offset()会给你一个帖子容器的 x,y 位置。
So if you bind an event to $(window).scroll()or to the mousescroll, you can check if the postcontainer's offset().topis less than the window.scrollTop. If it is then you start moving the item down relative to the post container. When doing this you need to keep track of the post container's height and the moving element's height to make sure it doesn't go down past the bottom of the container.
因此，如果您将事件绑定到$(window).scroll()或到 mousescroll，您可以检查 postcontaineroffset().top是否小于window.scrollTop. 如果是，那么您开始相对于帖子容器向下移动项目。执行此操作时，您需要跟踪 post 容器的高度和移动元素的高度，以确保它不会越过容器底部。
So if postcontainer.height - movingelement.position().top >= movingelement.height()then you need to fix the position of the moving element. Do the opposite while scrolling back up.
所以如果postcontainer.height - movingelement.position().top >= movingelement.height()那么你需要固定移动元素的位置。向上滚动时执行相反的操作。
Hopefully this will get you thinking and starting to kick out some code.
希望这会让你思考并开始踢出一些代码。
回答by Konga Raju
This is the solution for your problem with a simple css property.
这是使用简单的 css 属性解决您的问题的解决方案。
use position:stickyto follows the scroll.
用于position:sticky跟随滚动。
Here is the article explained.
这是文章解释。
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
and old way of doing this demo
和做这个演示的旧方法
with sticky position demo
带有粘性位置演示
