javascript - Delayed repaint on Scroll to Top of Fixed Header -

javascript - Delayed repaint on Scroll to Top of Fixed Header -

example: http://www.arkansasmatters.com/beta/news/politics

i have simple javascript keeps fixed header on website. when scrolling up, header on rare occasion show reddish bar disappear if go on scrolling up.

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

is there reason script cause following:

blank bar on scrolling up flickering while scrolling down

additional informaation:

browser: google chrome user agent: mozilla/5.0 (windows nt 6.1; wow64) applewebkit/537.36 (khtml, gecko) chrome/37.0.2062.124 safari/537.36

alternatively: there ie7+ cross browser solution similar missed?

update

this issue replicable if user scrolls , down. calling js function on , on again.

this solution worked similar problem having in chrome v38+ js/css accordion plugin. believe happened when js initiated css alter occurred plenty chrome's repaint function fell behind.

using translatez(0) nudge browser using gpu acceleration speed css transforms. here couple articles more detail:

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

javascript jquery html css