javascript - 使用鼠标滚轮时导致 IE 严重滞后的窗口滚动事件

Question

我在页面顶部附近有一个导航容器，当页面滚动超过某个值时，它应该添加或删除类名“stuck”(在 position:static 和 position:fixed 之间切换)。似乎在 FF 和 Chrome 中工作正常，但当然 IE(7,8 和 9)有问题。

使用鼠标滚轮滚动时，页面严重滞后(基本上无法使用)，但如果我捕获并拖动水平滚动条，页面就会平滑滑动，没有滞后。

我四处搜索表明，这可能是因为 IE 执行的滚动事件比其他浏览器多，但我无法弄清楚如何限制触发事件的数量。您可以在下面的代码块中看到我也在使用“滚动停止”解决方案，但我确实还需要能够在用户超出页面上的某个点时仍在滚动时执行回调。

我认为我实现它的方式非常简洁和基本，但是是否有更好的方式来处理这个问题，至少对于 IE 而言？

var scrollValue = 0;
var scrollTimer = false;

$(window).bind('scroll', function(){
    scrollValue = $(window).scrollTop();

    // SET TIMER DELAY FOR SCROLL-STOP
    if (scrollTimer) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(scrollStopped, 25);

    // STICK/UNSTICK HEADER
    if (scrollValue > 320){
        if (!$(stickyWrap).hasClass('stuck')){
            $(stickyWrap).addClass('stuck')
        }
    } else {
        if ($(stickyWrap).hasClass('stuck')){
            $(stickyWrap).removeClass('stuck');
        }
    }
});

Answer 1

下超时，上开关

如果您使 jQuery 更简单一些，并添加一个开关以仅在阈值前后执行一次任何操作，它应该可以很好地加快速度。

var header = $('.stickyWrap'),
    trig = 320,
    go = true;

$(window).bind('scroll', function(){
    var scrollValue = $(this).scrollTop();

    if ((go && scrollValue > trig) || (!go && scrollValue <= trig)) {//before or after
        header.toggleClass('stuck');//toggle class
        go ? go = false : go = true;//toggle boolean
    }
});

现在它只会在超过 320 的阈值之前和之后尝试执行任何操作。

Made A Fiddle >