4

我在页面顶部附近有一个导航容器，当页面滚动超过某个值时，它应该添加或删除类名“stuck”（在位置：静态和位置：固定之间切换）。似乎在 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');
        }
    }
});
4

1 回答 1

1

Down with timeout, up with switch

如果您让 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。

做了一个小提琴>

于 2014-10-05T19:53:28.510 回答