Question

让我切入追逐。它在这个网站上：http://www.smb.nu/wip/kampanj/

带有链接的白条应该在滚动过去时粘在顶部，这个效果是通过一些简单的jQuery实现的：

$(window).scroll(function() {
    $('#floater').toggleClass('sticky', $(window).scrollTop() > 129);
    $('#quote').toggleClass('sticky', $(window).scrollTop() > 129);
});

到目前为止，这么好（我相信）。 css类看起来像这样：

#floater.sticky {
    position: fixed;
    top: 0;
    z-index: 2;
}
div#quote.sticky {
    padding-top: 78px;
}

这在Firefox（OS X和Windows）中运行得很好，甚至在IE中也是如此（喘气！）。但是，在Chrome（OS X和Windows）以及Safari（OS X）中，它经常闪烁，消失并重新出现。尽管Chrome的网络检查员告诉我它在那里（screenshot）。

到底是怎么回事？我是否偶然发现了具有固定定位的WebKit渲染错误（似乎极不可能），或者犯了一些基本的初学者错误？或者它完全是另一回事？

Answer 1

添加：

-webkit-backface-visibility:hidden

到父容器应该可以做到。

Answer 2

我在chrome的控制台上用-webkit-transform: translateZ(0);修复了它...不要问我为什么，我认为它触发了一些gpu的计算并且似乎解决了它。但这是一个肮脏的变通方法，可能在不久的将来破裂。

Answer 3

删除-webkit-filter：blur（0px）;关闭#uberwrapper标头正常运行。

Answer 4

这可以通过使用纯css来实现，为什么需要jquery？

http://jsfiddle.net/SRpA4/

.header-cont {
width:100%;
position:fixed;
top:0px;
height:50px;
background-color:#C00;

}

Answer 5

我认为最近Chrome可能会对其呈现位置的方式做出改变：固定。我还没有弄清楚他们做了什么，或者为什么它没有为你工作，但我确实有一个可能更好的解决方案，因为它也适用于手机（很多手机都没有＃39; t支持固定定位）。

的jQuery

$(window).scroll(function() {
  if ( $(window).scrollTop() > 129 ) {
    var scrollTop = $(window).scrollTop();
    $('#floater').addClass('sticky').css('top',scrollTop);
  }
  else { $('#floater').removeClass('sticky'); }
});

CSS

#floater.sticky {
 position: absolute;
 top: 0;
 z-index: 2; }

Answer 6

这似乎是个错误。 #uberwrapper的-webkit-filter: blur(0px);似乎导致了这个问题。

不知道背后的确切原因。但是，一个简单的解决方法是删除-webkit-filter: blur(0px);

Chrome中的粘性顶栏渲染问题

6 个答案: