javascript - jQuery 滚动功能不触发(滚动太快)

Question

我发现如果用户滚动得太快，下面的 jQuery 函数就不会触发。这是事件的 jQuery 检测中的性能问题/错误，还是我需要对我的代码做些什么？

...或者，有没有更好的方法 [至少在性能可靠性方面] 用纯 JavaScript 调用它？如果是这样，我该如何编码？

        $(window).scroll(function() {
            var st = $(this).scrollTop();
            if(st < 50){
                $('.header_wrapper').css({'marginTop':-50});
            } if(st < 40){
                $('.header_wrapper').css({'marginTop':0});
            }
        });

您可以在此处查看实际效果:http://www.walkingfish-grainboards.com/privacy-policy/

感谢您的帮助 - 将不胜感激。

Answer 1

由于您正在考虑性能:

$(window).on('scroll',function(){
    var st = $(this).scrollTop(),
        mTop = ((st < 40) ? 0 : -50);

    $('.header-wrapper').css({marginTop:mTop});
});

与其将赋值放在 if 中，不如将值放入，然后根据该值进行一次赋值。对于您当前的语句，-50px 值无论您向下走多远都将保持不变(因为您永远不会清除该值)，并且只会在您滚动回顶部时返回到 0。因此，您不需要嵌套的 if 语句。

如果你真的想提高一个档次，包括缓存:

var scrollStuff = {
    headerWrapper:$('.header-wrapper'),
    onScroll:function(){
        var self = this,
            st = $(self).scrollTop(),
            mTop = ((st < 40) ? 0 : -50);

        self.headerWrapper.css({marginTop:mTop});
    }
};

$(window).on('scroll',function(){
    scrollStuff.onScroll();
});

通过缓存包括函数在内的所有内容，您无需每次都为要应用 marginTop 的元素重新查询 DOM。