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一直在追赶，大多数浏览器厂商现在通过特定的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);
}

Answer 2

我知道这是一个老问题，确定你已经找到了答案，但是如果有人遇到同样的问题需要修复它，只需将这个css代码添加到侧边栏。

#sidebar {
   -webkit-backface-visibility: hidden;
   -webkit-perspective: 1000;
}

使用鼠标滚轮滚动时固定元素闪烁问题

2 个答案: