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

我有一个靠近页面顶部的导航容器,当页面滚动超过某个值时,应该添加或删除类名“卡住”(在位置：静态和位置：固定之间切换).似乎在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');
        }
    }
});

解决方法:

关机超时,开关关机

如果你让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 >