ウェブページの上部からスクロールした後にdivをアニメ化する

Question

私は現在、ユーザーがページの上部からスクロールした後に別のdivの背後にdivを表示しようとしています。

アニメーションを使用してこれをスライドさせたいと考えています。このような...

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

しかし、私は離れて、ページの上部からユーザーがスクロールするまで、青いボックスの後ろの赤いボックスの滞在をする方法を見つけ出すことはできません。

また、ユーザーがページの上部までスクロールバックして、赤色ボックスが青色ボックスの下に再びスライドするようにする必要があります。

誰でもお手伝いできますか？

Answer 1

が、それにもかかわらず動作します：

デモここに（あなたがスクロールすると、より正確な結果を得るためのスクロールバーの矢印をクリックしてください）。

http://jsfiddle.net/37LZ5/

コンポーネント：私たちがスクロールしているどこまで知ることが

使用scrollTopスプライトを（）スクロール時

• 使用$（文書）.scrollトリガーとしては知っている（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で何かをしたjsfiddleバージョン http://jsfiddle.net/xaYTt/103/

Answer 4

です。

基本的に、青いボックスの距離よりもウィンドウをスクロールすると、赤いボックスがアニメーション表示されます。

100％ではありませんが、あなたが望むものかどうかを確認するだけです。これは、最もエレガントなソリューションではありませんhttp://jsfiddle.net/peduarte/xaYTt/104/