從網頁頂部滾動離開後爲網格製作動畫

Question

我目前正試圖在用戶從頁面頂部滾動之後使div從另一個div後面出現。

我希望能使用動畫效果使它滑出。像這樣...

http://jsfiddle.net/xaYTt/99/

但我無法弄清楚如何使紅框留下藍色的框，直到從頁面頂部的用戶滾動了。

我還需要在用戶滾動回頁面頂部時反轉此操作，以便紅框再次滑入藍框下方。

任何人都可以幫我嗎？

Answer 1

這還不是最完美的解決方案，但它仍然工作。

http://jsfiddle.net/37LZ5/

組件：

• 使用的$（document）.scroll作爲觸發滾動
• 使用scrollTop的（）知道我們有多遠滾動時就知道（0 =頂部）
• 記住狀態以確保動畫不會被觸發數十億次（var away）
• 使用.stop（）可防止在通過一個動畫中途時發生的奇怪行爲，另一個動畫被觸發

Answer 2

我認爲你正在尋找這個看看這個演示

Working demo

代碼

$(document).ready(function(){ 
    //$('#bottom-box').animate({'margin-top': '200px'}, 1500); 
    $('body').hover(function(){ 
     $('#bottom-box').animate({'margin-top': '200px'}, 1500); 
    }, function(){ 
     $('#bottom-box').animate({'margin-top': '50px'}, 1500); 
    }); 
}); 

Answer 3

如果我對你的問題的理解是正確的，這是你是什麼尋找

既然你說過，「用戶從頁面頂部滾動」，我補充說一個div位於頁面的頂部。

var isAlreadyOut=false; 
$("#divPageTop").mouseover(function(){ 
if(isAlreadyOut==true) 
{ 
    $('#bottom-box').animate({'margin-top': '60px'}, 1500); 
    isAlreadyOut=false; 
} 
else 
{ 
    $('#bottom-box').animate({'margin-top': '200px'}, 1500); 
    isAlreadyOut=true;      
} 
}); 

這裏是的jsfiddle版本 http://jsfiddle.net/xaYTt/103/

Answer 4

我做了一件具有的jsfiddle這可能是你所追求的，如果我理解正確你的問題。

基本上，當您滾動窗口的距離超過藍色框的距離時，紅色框會生成動畫。

不是100％，只是一個快速模擬，看看這是你想要的。 （滾動時，點擊滾動條箭頭的更精確的結果）

演示在這裏：http://jsfiddle.net/peduarte/xaYTt/104/