Jquery scrollTop animation - javascript、jquery

私は一度キックする必要のあるアニメーションを持っていますscrollTop（）は、ページ上の指定された位置にヒットします。その部分はうまくいきましたが、私が望むのは、ページをスクロールして要素を元の位置に戻したときに、アニメーションが逆転することです。

http://cdpn.io/dphBx

私の例のコードは正常に動作しており、JS私はローカルで作業しているサイトと同じですが、Chromeでは、ページをスクロールして元の位置に戻っていません.JQueryは私がリンクしている唯一のJavascriptですので、 CSSの中にはそれを防ぐべきではないものがあります.JQueryに関してはまだ緑がかっていますので、私に同行してください。私はおそらくif / else文がこれを達成する最善の方法ではないと考えていますか？何かご意見は？

回答：

MacではChrome 31を使用しています。ただし、パフォーマンスを向上させるには、次の変更を行う必要があります。

1. つかいます .stop(true, true) アニメーションを連鎖する前に、アニメーションが完了するようにします。
2. resizeイベントをスロットルまたはデバウンスして、頻繁に実行されないようにし、実行する必要のある計算の数を節約し、2つのアニメーションの終了状態間ですばやく切り替えるのを防止します。
3. スクロール位置を取得する $(window).scrollTop() 体の代わりに

私はここでjQueryスロットル+デバウンスプラグインを使用することに決めました： http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js

$(document).ready(function(){
$(window).scroll($.throttle(100, function(){
var position = $("window").scrollTop();
if(position >= 200){
$("#foo").stop(true,true).animate({left: "200px"}, "fast");
} else{
$("#foo").stop(true,true).animate({left: 0}, "fast");
}
}));
});