滚动到固定标题顶部时延迟重绘答案

【问题标题】：Delayed repaint on Scroll to Top of Fixed Header滚动到固定标题顶部时延迟重绘
【发布时间】：2014-11-30 23:14:03
【问题描述】：

示例：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);
}

此脚本是否有原因会导致以下情况：

向上滚动时出现空白栏
向下滚动时闪烁

附加信息：

浏览器：谷歌浏览器
用户代理：Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.124 Safari/537.36

另一种选择：我错过了另一个类似的 IE7+ 跨浏览器解决方案吗？

更新

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

【问题讨论】：

标签： javascript jquery html css

【解决方案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

【讨论】：

是的。通过在更长的时间段内不去抖动，我挤满了我的事件循环（实际上是任务队列）。不久前我研究了这个之后，很明显这是一个空转换黑客。它也被认为可以通过使用 {will-change} 来改进 Chrome 和 Opera 在另一个用户的问题上进行了很好的对话。 stackoverflow.com/questions/15152470/…
顺便说一句，您可能想在答案中提及去抖动。

【解决方案2】：

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

-webkit-transform: translateZ(0)

【讨论】：

我应该注意，我仍在寻求解释为什么这可以解决问题。任何信息将不胜感激。