jqueryでスクロールするときのフェードインとフェーズ

Question

ピクセルの量がスクロールされるたびにdivを表示し、さらにスクロールしてからフェードインしたいとします。私はいくつかのロジックを見つけましたが、最終的に矛盾があり、divがフェードインしています。スクロールが250を超えるたびに消えてしまいます。 どうすれば解決できますか？

$('#1').hide(); 

$(window).scroll(function() { 
    if ($(this).scrollTop() > 250) { //use `this`, not `document` 
    $('#1').fadeIn(); 
    } 
    if ($(this).scrollTop() > 1250) { //use `this`, not `document` 
    $('#1').fadeOut(); 
    } 
}); 

Answer 1

はscrollTopスプライト値は以下1250に等しい場合にのみ要素を表示します。

if ($(this).scrollTop() > 250 && $(this).scrollTop() <= 1250){ 
    $('#1').fadeIn(); 
} 

---

あなたは前のアニメーションを停止するstop()を使用することができますが。

$(window).scroll(function() { 
    if ($(this).scrollTop() > 250) { 
    if ($(this).scrollTop() > 1250) 
     $('#1').stop().fadeOut(); 
    else 
     $('#1').stop().fadeIn(); 
    } 
}); 

Answer 2

ロジックに欠陥があるためです。 scrollTopがあなたの現在のifの条件に該当しない場合に対応する必要があります。私はそれがChromeで問題があるとして、それは数字で始まっていませんでしたように、idを変更しなければならなかった上記の例では

$(window).scroll(function() { 
    if ($(this).scrollTop() > 250 && $(this).scrollTop() < 1250) { 
    $('#1').fadeIn(); 
    } else { 
    $('#1').fadeOut(); 
    } 
}); 

Working example

注：これを試してみてください。