窗口滚动功能滞后

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在这种情况下用于不触发前一个调用，如果下一个滚动事件被触发少于50ms，如果你认为你的用户将滚动较慢，你可以增加这个值，例如到100ms等