如何在固定元素通過時滾動父元素內部的元素？

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/