javascript - 窗口滚动功能滞后

Question

我有一个根据网页位置定位 div 的函数。

function calcNav(){
    var b = $('#breadcrumb').offset().top;
    var w = $(window).scrollTop();
    var x = b - w;
    //console.log('breadcrumb from top = ' + b + ' window scrolled = ' + w + ' position of nav = ' + x);
    $('.sub-nav').css('top', x);
}
calcNav();
$(window).scroll(calcNav);

该函数运行良好，我唯一的问题是，由于它不断渲染，我的页面速度显得有点滞后 - 有什么方法可以在滚动结束时而不是在滚动期间运行该函数？

Answer 1

我建议您将其与 setTimeout 结合使用并添加少量毫秒:

var scrollTimeout;
$(window).scroll(function() {
    clearTimeout( scrollTimeout );
    scrollTimeout = setTimeout( calcNav, 50 );
});

在这种情况下，

clearTimeout 用于在下一个滚动事件触发时间小于 50 毫秒时不触发上一个调用，如果您认为用户滚动速度会变慢，您可以增加该值，例如增加到 100 毫秒等.