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

我试图让侧栏在滚动到某一点后固定在顶部.

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时才会“闪烁”

解决方法

我遇到了同样的问题,这似乎是一个错误,当您的浏览器根据您的计算机GPU,内存,cpu等进行处理太多时…我能够通过添加来修复它以下转换代码到固定位置元素,(transform：translateZ(0); – webkit-transform：translateZ(0);)强制浏览器使用硬件加速来访问设备的图形处理单元(GPU)来制作像素飞.另一方面,Web应用程序在浏览器的上下文中运行,这使得软件可以完成大部分(如果不是全部)渲染,从而减少了转换的马力.但是Web一直在追赶,大多数浏览器厂商现在通过特定的CSS规则提供图形硬件加速.

使用-webkit-transform：translate3d(0,0);将GPU转换为CSS过渡的动作,使它们更平滑(更高的FPS).

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

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