$（window）.scroll不够快，不能处理我的jquery？

Question

我遇到了窗口滚动的问题，我认为事件发生得太快而无法处理。

我使用航点来检测滚动时页面上的子节点何时触及标题，并且当它执行时它将页眉向上推。当向上滚动时，标题会被拉到原始位置。现在，第一部分完美无瑕地工作，头部被推高，但将其向下拉回是非常错误的。滚动太快会导致标题卡在路上。

它像这样陷入困境： 但它应该进一步下降：

如果你慢慢滚动它会起作用，但实际上它不会切割它。不幸的是，该网站尚未公开，所以我暂时无法链接到它。

        $('.subnav-wrapper').waypoint(function(direction) {
            var $headerWrapper = $('.header-wrapper');
            var headerHeight = $headerWrapper.outerHeight();

            $(window).scroll(function() { 
                var scrollHeight = $(this).scrollTop();

                if( scrollHeight >= 400 ) {
                     $headerWrapper.css( 'margin-top', ( scrollHeight - 400 ) * -1 );
                }
            });

        },
        {
            offset: $('.header-wrapper').outerHeight()
        }); 

Answer 1

将.scroll声明移到航点声明之外。

然后使用lodash .throttle来限制执行次数。另外，让我们缓存jQuery窗口对象。

 var $window = $(window);
 $window.scroll(_.throttle(function () {
   var scrollHeight = $window.scrollTop();
   if (scrollHeight >= 400) {
     $headerWrapper.css('margin-top', (scrollHeight - 400) * -1);
   }
 }, 16), {
   trailing: true
 });

限制为16ms是一个很好的经验法则，因为它具有60hz显示器的刷新率，并且用户不会注意到任何超过16ms的速度。