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

【问题标题】：How to scroll an element inside parent when a fixed element passes?固定元素通过时如何滚动父元素内的元素？
【发布时间】：2012-08-24 22:41:54
【问题描述】：

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

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

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

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

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

非常感谢任何帮助！

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

更新：

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

应该澄清我的意思：

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

【问题讨论】：

【解决方案1】：

你想要这样吗？

更新：

这个怎么样？

【讨论】：

很好，我喜欢第二个例子。看起来您只需要允许价格框在按钮位于分配区域内时跟随按钮。（并在底部停止，直到您向上滚动）。
是的，这就是我现在的问题 Thor84no，我认为这个问题已经死了，所以我设法自己用 waypoints.js 完成了这个。然而，让它在两个滚动方向上都工作并且在每个区域的底部不显示价格比预期的要难。伟大的工作，但是songsunkyun！

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：