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);
});

jQuery滚动功能不会触发（滚动太快）

2 个答案: