Firefox 中不连贯的 jQuery 滚动答案

【问题标题】：Choppy jQuery Scrolling in FirefoxFirefox 中不连贯的 jQuery 滚动
【发布时间】：2013-11-20 02:22:57
【问题描述】：

我有一个小的 jQuery sn-p，当用户滚动时，我用它来移动我的导航栏，然后让它从页面顶部保持 75px。

在 IE9 中滚动非常流畅，但在 Firefox 中则非常生涩和断断续续。

这是我的代码：

jquery:

$(window).scroll(function(){
    var scrollTop = $(this).scrollTop();
    $('div.hnav').css('margin-top',Math.max(-235,0-scrollTop));
});

css:

div.hnav {
    position: fixed;
    top: 300px;
    height: 40px;
}

有什么建议吗？

【问题讨论】：

使用throttle function，这样滚动时代码不会每2ms执行一次
我得到了建议...我可能会因为这样说而被杀死，但是...将浏览器更改为不那么容易出错的东西，因为 FF 在 novadays 中比 IE 更容易出错。
好吧，让@FlashThunder 的巫毒娃娃出来
当你的滚动条件满足时，为什么不更新top的CSS值。 if ($(this).scrollTop() > 200) { $('div.hnav').css('top', 75) }
感谢您的快速回复，您能详细说明一下吗？我不熟悉设置油门功能。谢谢！

标签： javascript jquery css

【解决方案1】：

不要使用margin-top。更改边距值通常会导致回流。为什么不直接使用top，因为您已经设置好要定位的位置了？

【讨论】：

【解决方案2】：

我经常发现解决方案是让 GPU 处理滚动。您可以强制发生这种情况的一种方法是添加

webkit-transform:translate3d(0,0,0)

到您正在滚动的元素。您可以通过在 Chrome->Developer Tools->General 中打开页面并选择“强制加速合成”和“显示合成图层边框”来查看 GPU 与 CPU 处理的内容。这将导致 GPU 正在处理的任何内容周围出现橙色边框。

【讨论】：

【解决方案3】：

我建议你改用这种方法：http://jsfiddle.net/Uxn9f/

更新的 CSS

div.hnav {
    position: absolute;
    top: 300px;
    height: 40px;
}

从fixed 交换到absolute 定位。这允许元素随着页面的滚动而移动。

更改的 JQuery

$(window).scroll(function () {
    if ($(this).scrollTop() > 235) {
        $('div.hnav').css({
            'position': 'fixed',
            'top': 75
        })
    } else {
        $('div.hnav').css({
            'position': 'absolute',
            'top': 300
        })
    }
});

基本上我们所做的是检查页面的当前滚动。当我们到达某个点（235px）时，我们将通过更改其位置（类型和尺寸）将.hnav“锁定”为距视口顶部 75px。

如果用户向上滚动超过 235px 魔法标记，重置定位。

【讨论】：

谢谢。平滑直到结束。然后在Firefox中从绝对位置到固定位置有一个非常明显的捕捉，我在IE9中没有看到这个捕捉。
嘿@Bryan，我认为“快照”是因为我上面的代码中的数学有点偏离。将 235 更改为 225 (300 - 75)