javascript - 固定元素通过时如何滚动父元素内的元素？

Question

这对于我的 jQuery / javascript 知识来说有点太棘手了，所以我很抱歉说我还没有真正尝试过任何东西。我需要一些提示才能指出正确的方向！

问题是我的页面上有一个固定元素，当向下滚动时，这个元素将进入不同的包装器，而在那个包装器中，我需要一个较小的子元素来“捕捉”到我的固定元素，而它在元素中。

有点难以解释，我在这里做了一个静态模型：

http://jsfiddle.net/ycmYc/

当“固定购物车按钮”达到价格时，我需要它附加并使用购物车按钮滚动，只要它在价格“产品 div”内。当它离开并进入下一个时，价格应该保持在其产品的底部，然后当用户通过向上滚动到达它时再次捕捉到购物车按钮。

好吧，再一次，很抱歉没有尝试任何东西，但我迷路了。如果我不得不在没有任何帮助的情况下这样做，我想我会选择 waypoints.js，但感觉远非最佳。

非常感谢任何帮助！

固定元素将始终具有相同的位置，所以我猜可以使用从浏览器顶部的偏移量，而不是跟踪它的位置。总是有东西;）

更新：

我自己一直在研究它，让它向下而不是向上工作：

应该澄清我的意思：

http://retype.se/temp/scrolltest/test.html

当按价格滚动时，它会向下连接按钮并在离开容器时松开。我现在的问题是让它捕捉到它并在向上滚动时滚动回原来的位置:)

Answer 1

你想要这样吗？

http://jsfiddle.net/ycmYc/39/

唯一的结果： http: //fiddle.jshell.net/ycmYc/39/show/light/

更新：

这个怎么样？

http://jsfiddle.net/ycmYc/93/

唯一的结果： http: //fiddle.jshell.net/ycmYc/93/show/light/

Answer 2

这只是一个脑残，但也许它会让事情顺利进行（抱歉，没有时间玩小提琴）。但我有一个想法，也许是试图在光学上作弊。

我的意思是，要计算所有价格 div 的绝对位置，隐藏它们，当购物车 div 通过滚动到达该位置时，显示 x 像素滚动量的价格 div（或通过 z-indexes 通过制作背景，而不是确定什么更适合你）。

希望这会有所帮助，也许我今天有时间编写脚本。

Answer 3

这有点取决于约束。window.pageYOffset您可以使用：或来检测窗口的滚动位置 document.documentElement.scrollTop。

如果 div 大小相同，您可以轻松计算出按钮位于哪个 div 以及position: fixed旁边的价格。