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

Question

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

问题是我的页面上有一个固定的元素，当向下滚动时，这个元素将进入不同的包装器，而在该包装器中，我需要一个较小的子元素来实现＆＃34; snap＆＃34;到我的固定元素，当它在元素中时。

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

http://jsfiddle.net/ycmYc/

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

嗯，再次，抱歉没有尝试任何东西，但我迷路了。如果我不得不在没有任何帮助的情况下这样做，我想我会选择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

这只是一个脑力，但也许它会让事情发生（sry，没有时间做小提琴）。但我得到了一个想法，也许是试图以光学方式作弊。

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

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

Answer 3

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

如果div的大小相同，您可以轻松计算按钮所在的div和position: fixed旁边的价格。