使用鼠标滚轮时导致 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 >