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

Question

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

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

说不清的心，我做了一个静态的样机在这里：

http://jsfiddle.net/ycmYc/

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

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

任何帮助很高兴！

固定元素将始终具有相同的位置，所以我猜测可能会使用来自浏览器顶部的偏移而不是跟踪其位置。总有一些事情;）

更新：

一直在努力自己，并得到它向下，但不工作向上：

应该澄清我的意思：

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

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

Answer 1

这只是一个brainfart，但也许它会让事情进行（sry，没有时间为小提琴）。但我明白了，也许试图以光学方式作弊。

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

希望这会有所帮助，也许我今天花时间来编写它。

Answer 2

它有点取决于约束条件。您可以通过以下方式检测窗口的滚动位置： window.pageYOffset或document.documentElement.scrollTop。

如果div的大小完全相同，您可以轻松计算出哪个div的按钮已结束，并且旁边的价格是position: fixed。

Answer 3

你想要这样吗？

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/