jquery - 修复了使用鼠标滚轮滚动时元素闪烁的问题

Question

我试图使侧边栏在滚动到某个点后固定在顶部。

var sidebarTopPos = $('#sidebar').offset().top;
$(window).scroll(function(event) {
    if ($(window).scrollTop() >= sidebarTopPos) {
        $('#sidebar').css({
            position: 'fixed',
            top: 0
        });
    }
    else {
        $('#sidebar').css({
            position: 'relative'
        });
    }
});​

看看这个 jsfiddle

当我向下拖动滚动条时，整个事情工作正常。然而，当我尝试使用鼠标滚轮滚动时，当侧栏从“相对”更改为“固定”时，我会看到恼人的闪烁，我已经尝试了很多东西。请帮忙。

编辑:也许我应该更清楚。侧边栏仅在穿过顶部 div 时才会“闪烁”

Answer 1

我遇到了同样的问题，这似乎是当您的浏览器根据您的计算机 GPU、内存、CPU 等处理太多事情时发生的错误...，我能够修复通过将以下转换代码添加到固定位置元素(transform:translateZ(0);-webkit-transform:translateZ(0);)，强制浏览器使用硬件加速来访问设备的图形处理单元 (GPU) 让像素飞起来。另一方面，Web 应用程序在浏览器的上下文中运行，这让软件可以完成大部分(如果不是全部)渲染工作，从而减少转换的能力。但 Web 已经迎头 catch ，大多数浏览器供应商现在都通过特定的 CSS 规则提供图形硬件加速。

使用-webkit-transform:translate3d(0,0,0);将使 GPU 开始执行 CSS 转换，使它们更平滑(更高的 FPS)。

注意:translate3d(0,0,0) 对于您所看到的内容没有任何作用。它将对象在 x、y 和 z 轴上移动 0px。这只是一种强制硬件加速的技术。

#sidebar {
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}