3

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

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

4

2 回答 2

13

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

使用-webkit-transform: translate3d(0,0,0); 将为 CSS 过渡启动 GPU，使它们更平滑（更高的 FPS）。

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

#sidebar {
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
于 2014-09-18T22:54:13.197 回答
4

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

#sidebar {
   -webkit-backface-visibility: hidden;
   -webkit-perspective: 1000;
}
于 2015-10-29T21:21:28.957 回答