遷移速度はスクロール速度に依存します

Question

1秒の遷移を持つトップナビゲーションを作成すると、scroll >= 300の後に固定された状態に戻ります。私は速くスクロールすると

$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 

    if (scroll >= 100 && scroll < 300) { 
     $("#navbar").css({ "top": "-50px", "transition": "1s ease-out"}); 
     $("#navbar").removeClass('navbar-static-top'); 
    } 
    else if (scroll >= 300) 
    { 
     $("#navbar").addClass('navbar-fixed-top'); 
     $("#navbar").css({ "top": "0px", "box-shadow": "0 2px 15px 0 rgba(0,0,0,0.4)"}); 
     $("#topsection").css("padding-top", "50px"); 

    } 
    else if (scroll < 100) { 
     $("#navbar").css({ "top": "0px", "transition": "0s ease", "box-shadow": "0 0px 0px 0 rgba(0,0,0,0.4)" }); 
     $("#navbar").addClass('navbar-static-top'); 
     $("#navbar").removeClass('navbar-fixed-top'); 
     $("#topsection").css("padding-top", "0px"); 
    } 
}) 

は、残念ながら、それは遷移は、私が遅いスクロールするときではなく、より速く動くかのように思える：私のjQueryのは、次のように見えます。私はそれが私のスクロール速度から独立していることを本当に望んでいます。どのように私はそれを達成するのですか？なぜこのように行動しているのでしょうか？

Answer 1

スクロールを速くすると、イベントのスクロールが多くなります。
スクロール速度に依存しないようにするには、code1のようなスクロール速度を使用するか、code2のようなタイムアウトを使用する必要があります。

コード1：

$(window).on('mousewheel DOMMouseScroll', function (e) { 
    var e0 = e.originalEvent, 
    delta = e0.wheelDelta || -e0.detail; 
    //delta is scroll speed! 

    //~~ 
}); 

コード2：

var isFiring = false; 
var interval = 200; // bigger makes slower 
$(window).scroll(function(){ 
    if(isFiring) return; 
    setTimeout(function(){ 
    isFiring = false; 
    }, interval) 
    isFiring = true; 

    //~~ 
});