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/

Thnx为您提供帮助-非常感谢。

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。

Answer 2

好吧，我本来以为是。 这很好用：

$(window).scroll(function(){
yos = (window.pageYOffset > 48);
    $('.headerwrap').toggleClass('stick', yos);
$('.pagetitlewrap').toggleClass('headerwrap_stuck', yos);
});