转换速度取决于滚动速度

Question

我做了一个顶部导航，转换为1秒，在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; 

    //~~ 
});