滚动到固定标题顶部的延迟重绘

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 Chrome
• 用户代理：Mozilla / 5.0（Windows NT 6.1; WOW64）AppleWebKit / 537.36（KHTML，与Gecko一样）Chrome / 37.0.2062.124 Safari / 537.36

另外：是否还有其他类似的IE7 + Cross Browser解决方案，我错过了？

更新

如果用户快速向上和向下滚动，则此问题可以复制。一遍又一遍地调用JS函数。

Answer 1

将以下CSS添加到粘性导航将阻止快速JS调用创建重绘问题。

-webkit-transform: translateZ(0)

Answer 2

这个解决方案适用于我在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