當滾動jQuery時移動對象更近

我需要創建5個圖層 - div。每個圖層都有不同的高度，但它們之間的空間相同。例如：當滾動jQuery時移動對象更近

Div 1 
30px gap 
Div 2 
30px gap 
Div 3 
30px gap

我需要一些jQuery腳本，這將決定我的頁面（body標籤）的高度，當我向下滾動平滑地改變頂部（對象將被絕對定位，他們需要重疊），或與容限頂部他們一個一個..首先將下來第1層爲50px，然後第1層與2爲50px，然後前三層爲50px ...並在頁面結束時，他們將重疊20px（30px間隙+ 20px重疊）。所以我不想一次移動所有圖層。

我希望這個解釋足夠了，我還沒有任何腳本，有一些，但沒有任何工作。爲了更好的想象，這是一個漢堡分成：頂級麪包，沙拉，培根，肉，底部麪包。它會出現在一個卷軸網頁的旁邊。在頂部它將被分割，並且當用戶向下滾動時，成分將重疊，並且在頁面的底部他們將完成一個漢堡。

謝謝你的幫助。

來源

2014-03-26 Leachim

這會給你知道從哪裏開始：

$(window).scroll(function(){ 
    var margin_max = 30; 
    var join_at = 70; 
    var margin = Math.floor(margin_max - ($(window).scrollTop() * margin_max/join_at)); 
    if(margin < 0) margin = 0; 
    $('.part').css('margin-bottom', margin); 
});

演示：http://jsfiddle.net/L6DP5/1/

當然你需要修改它一點點地滿足您的需求

來源

2014-03-26 01:55:15 Peter

謝謝你，但是這並不是我所需要的，我有類似的腳本，不能從中前進。我需要首先重疊Div1而不是Div2 - 其他div不必移動..比12合在一起超過3，超過123合在4以上，然後1234超過5。5永遠不會移動。所有人都必須按照這個順序「下降到5」。 – Leachim

當滾動jQuery時移動對象更近

回答

相關問題