スクロールアップ時にdivを元の位置に戻す

Question

スクロールダウン時にdivをアニメーションで表示すると、divをアニメーションを完成させずに非常に高速に上下にスクロールすると問題が発生する上部の画面から少しずつ出てきます。

.animate（）関数で.stop（）を削除し、非常に高速に上下にスクロールすると、divはこれをしばらく続けます。

上下にスクロールするときにメニューが画面から出ないという唯一の違いで、上下にスクロールしたときのアニメーションを維持したいのですが、このようなスタックオーバーフローの質問があります。仕事見つかっjsfiddleのコードはここで見つけることができます：

http://jsfiddle.net/QLLkL/4/

$(window).scroll(function(){ 
    if($(window).scrollTop() > 480 && !animationStarted){ 
     $("#menu").stop().animate({ "top": "+=180px" }, 1000); 
     animationStarted = true; 
    }; 
    if($(window).scrollTop() < 480 && animationStarted){ 
     $("#menu").stop().animate({ "top": "-=180px" }, 1000);   
     animationStarted = false; 
    };   
}); 

Answer 1

は、なぜあなたは "+ =" や使用していますか " - ="？実際には、アニメーションなしでスクロールして完了すると、現在の値が取得され、 '567ピクセル'が減算されます。私はあなたがそれぞれ "567px"と "0px"にすることをお勧めします。 http://jsfiddle.net/myTerminal/QLLkL/6/

$(window).scroll(function(){ 
     if($(window).scrollTop() > 480 && !animationStarted){ 
      $("#menu").addClass("bottom"); 
      animationStarted = true; 
     }; 
     if($(window).scrollTop() < 480 && animationStarted){ 
      $("#menu").removeClass("bottom"); 
      animationStarted = false; 
     };   
}); 

編集：更新の例では、Firefoxで動作します：http://jsfiddle.net/myTerminal/QLLkL/13/を設定する逃したあなたも、ここでの例を参照してくださいあなたは、Internet Explorer 9.

をターゲットではないのは確実だ場合にはCSS3の遷移を試みることができる "top：0px"。

Answer 2

http://jsfiddle.net/prollygeek/QLLkL/14/

$(document).ready(function(){ 
    var animationStarted = false; 
    var x=$("#menu").css("top") 
    $(window).scroll(function(){  
     if($(window).scrollTop()>x) 
     { 
      $("#menu").stop().animate({ "top": x+"px" }, 20); 
     } 
     else 
     { 
      $("#menu").stop().animate({ "top": $(window).scrollTop()+"px" }, 20); 
     } 
     // animationStarted = true;    
    }); 
}); 

これはそれをすべて修正する必要があります。

Answer 3

$(document).ready(function(){ 
    var animationStarted = false; 

     $(window).scroll(function(){ 
     if($(window).scrollTop() > 1 && !animationStarted){ 
      $("#menu").stop().animate({ "top": $(window).scrollTop()+"px" }, 20); 
      // animationStarted = true; 
     }; 
     if($(window).scrollTop() < 1 && animationStarted){ 
      ("#menu").stop().animate({ "top":$(window).scrollTop()-50+"px" }, 20); 
      // animationStarted = false; 
     };   
    }); 
});