2

让我切入正题。它在这个网站上：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 的网络检查员告诉我它在那里（截图）。

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

4

6 回答 6

3

添加：

-webkit-backface-visibility:hidden

到父容器应该可以解决问题。

于 2014-11-24T19:10:10.260 回答
2

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

于 2013-08-09T12:59:52.183 回答
1

当您删除 -webkit-filter: blur(0px); 关闭#uberwrapper 标头功能正常。

于 2013-08-09T12:59:49.380 回答
0

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

http://jsfiddle.net/SRpA4/

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

}

于 2013-08-09T12:52:24.007 回答
0

我认为 chrome 最近可能对其呈现位置的方式进行了更改：已修复。我不知道他们做了什么或者为什么它不适合你，但我确实有一个可能更好的解决方案，因为它也适用于手机（许多手机不支持固定定位）。

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; }
于 2013-08-09T13:00:27.193 回答
0

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

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

于 2013-08-09T13:02:37.600 回答