卷筒到固定标头顶部的延迟重涂

Question

示例：http://www.arkansasmatters.com/beta/news/politics

我有一个简单的javascript，保持一个固定的标题在网站上。当滚动时，头在罕见的情况下会显示这个红色的条形图，如果你继续滚动，它就会消失。

​

​

 function stickynav() {
var win = $(window),
    nav = $('#primary_nav_wrap'),

    pos = nav.offset().top,
    sticky = function () {
        win.scrollTop() > pos ? nav.addClass('sticky') : nav.removeClass('sticky');
    };
win.scroll(sticky);
}

是否存在此脚本会导致以下情况的原因：

• 滚动的空白条
• 向下滚动时闪烁

其他信息：

• 浏览器: Google
• 用户代理: Mozilla/5.0 (WindowsNT6.1；WOW64) AppleWebKit/537.36 (KHTML，类似壁虎) Chrome/37.0.2062.124 Safari/537.36

或者:是否还有类似于此的另一种IE7+交叉浏览器解决方案？

更新

如果用户快速上下滚动，此问题是可复制的。一次又一次地调用JS函数。

Answer 1

这个解决方案适用于我在Chrome v38+中使用JS/CSS手风琴插件时遇到的一个类似的问题。我相信只有当JS启动CSS更改时才会发生这种情况，这种变化发生得足够快，以至于Chrome的重绘功能落后了。

使用translateZ(0)将促使浏览器使用GPU加速来加速CSS转换。下面是几篇更详细的文章：

http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Answer 2

将下面的CSS添加到粘性导航中将防止快速的JS调用创建重绘问题。

-webkit-transform: translateZ(0)