Question

我有一小段jQuery，当用户滚动时，我用它来移动我的导航栏，然后让它从页面顶部粘上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;
}

有什么建议吗？

Answer 1

请勿使用margin-top。更改边距值通常会导致回流。为什么不直接使用top，因为你已经设置了这个设置？

Answer 2

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

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

到您正在滚动的元素。您可以通过在Chrome-＆gt;开发人员工具 - ＆gt;常规中打开页面并选择＆＃34;强制加速压缩＆＃34;来查看GPU与CPU正在处理的内容。和＆＃34;显示合成图层边框＆＃34;。这将导致橙色边框出现在GPU处理的任何内容周围。

Answer 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中使用Choppy jQuery滚动

3 个答案:

更新了CSS

更改了JQuery