延迟重绘顶部固定报头

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

我有一个简单的JavaScript，保持在网站上固定报头。向上滚动时，罕见情况下的标题将显示此红色条，如果您继续向上滚动，该条会消失。延迟重绘顶部固定报头

The Red Bar is not suppose to be there.

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); 
}

是否有一个原因，该脚本将导致以下后果：上滚动起来

闪烁

空白栏，同时向下滚动

附加Informaation ：

浏览器：Google Chrome
用户代理：Mozilla/5.0（Windows NT 6.1; WOW64）为AppleWebKit/537.36（KHTML，例如Gecko）Chrome浏览器/ Safari浏览器37.0.2062.124/537.36

或者：难道还有其他的IE7 +跨浏览器的解决方案与此类似，我错过了？

更新

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

来源

2014-10-06 JosephMCasey

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

来源

2014-11-03 18:01:55 aponzani

是的。我正在拥挤我的事件循环（实际上是任务队列），而不是在更长的时间段内去除。在我看了一会儿之后，很明显这是一个空转变黑客。它也可以通过使用{will-change}对Chrome和Opera进行改进。在其他用户的问题上进行了很好的对话。 http://stackoverflow.com/questions/15152470/chrome-rendering-issue-fixed-position-anchor-with-ul-in-body/15203880#comment41199397_15203880 – JosephMCasey 2014-11-11 19:22:50

你可能想提到你的答案中的debouncing 。 – JosephMCasey 2014-11-11 19:25:52

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

-webkit-transform: translateZ(0)

来源

2014-10-06 18:06:37 JosephMCasey

我要指出，我仍然在寻找为什么这个修复该问题的解释。任何信息，将不胜感激。 – JosephMCasey 2014-10-06 18:15:06

延迟重绘顶部固定报头

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

更新

回答

相关问题