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

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;
}