使用鼠标滚轮时，窗口滚动事件导致IE严重卡顿。

Question

我在页面顶部有一个导航容器，当页面滚动超过某个值时，应该添加或删除“stuck”类名（在position：static和position：fixed之间切换）。在Firefox和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');
        }
    }
});

- relic

---

与您的答案无关，但触发事件 $(window).on('scroll', function(){...}).trigger('scroll');，因为页面在加载时并不总是在0位置。 - Popnoodles

我猜测IE由于您执行setTimelimit的时间太短而出现了延迟。您可以尝试将其增加到100。 - Leandro Barreto

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的阈值之前和之后尝试执行一次任何操作。

制作了一个小工具 >

- FiLeVeR10

---

我完全不知道。这个问题是几年前的事情了，而且我甚至都不记得当时发生了什么，或者是否解决了。但我可以肯定的是，它肯定与IE无关，因为IE是最蠢的东西。 - relic