Скорость перехода зависит от скорости прокрутки

Question

Im делает верхнюю навигацию, которая с переходом 1s снова появляется после scroll >= 300. Мой JQuery выглядит следующим образом:

$(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"); 
    } 
}) 

К сожалению, когда я прокрутки быстрее, это, кажется, как будто переход движется быстрее, в отличие от, когда я прокручивать медленно. Я действительно хочу, чтобы он был независим от моей скорости прокрутки. Как мне это достичь? и почему это так действует?

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; 

    //~~ 
});