Question

我在页面顶部附近有一个导航容器，当页面滚动超过某个值时，应该添加或删除类名“卡住”（在位置：静态和位置：固定之间切换）。似乎在FF和Chrome中工作正常，但当然IE（7,8和9）有问题。

当使用鼠标滚轮滚动时，页面严重滞后（基本上无法使用），但如果我抓住并拖动水平滚动条，则页面会平滑滑动而没有延迟。

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

我认为我实现它的方式非常简洁，基本没有，但有没有更好的方法来解决这个问题，至少对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 >

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

1 个答案: