Как избежать мерцания div при изменении его класса функцией addClass в Chrome?

[tweenfaster]

Столкнулся с проблемой, именно в google chrome. Делаю навигационную панель в шапке сайта, прилипающую к верхнему краю окна при скролле. Для этого, при помощи jquery и javascript, я изменяю class этого div элемента таким образом:

<script>
window.onscroll = function() {

	if( window.pageYOffset > 0){
	  $('#header').addClass('scrolled'); 
	}
    else {
        $('#header').removeClass('scrolled')
    }
}
</script>

#header {
	background: url("images/background.e95d2cd1e8ca.png") repeat;
	background-color: #f48831;
	height: 50px;
	position: absolute;
	width: 100%;
	font-size: 10px;
	z-index: 100;
}
#header.scrolled {
	-webkit-box-shadow: 0px 1px 0px #d67a37, 0px 2px 2px rgba(0, 0, 0, 0.1), inset 0px -1px 1px rgba(255, 255, 255, 0.2);
	-moz-box-shadow: 0px 1px 0px #d67a37, 0px 2px 2px rgba(0, 0, 0, 0.1), inset 0px -1px 1px rgba(255, 255, 255, 0.2);
	box-shadow: 0px 1px 0px #d67a37, 0px 2px 2px rgba(0, 0, 0, 0.1), inset 0px -1px 1px rgba(255, 255, 255, 0.2);
	position: fixed;

}

Но во время смены класса и перерисовки в соответствии с новыми свойствами css, происходит однократное мерцание. Как сделать чтобы этого мерцания не происходило? Нужно один в один как тут www.zopim.com, тут они как-то избежали эту проблему. Хочу именно понять, как эта проблема решается, по этому альтернативные варианты не интересны.
Примечание:
Если изначально прописать в #header свойство position: fixed; а в #header.scrolled вообще убрать этот параметр, то смена класса происходит без мерцания.

[danik.js]

О каком мерцании речь?
Событие scroll происходит после того, как страница проскроллилась.
То есть твой div сначала проскроллится немного, потом когда присвоишь класс - встанет на место. Ты об этом? Кстати в FF вроде такое не наблюдается, там чуть иначе идет обработка события.

[tweenfaster]

Нет, я не об этом. Правильно, она встает на место как положено, но при этом происходит полная перерисовка div, панель исчезает и появляется, а не просто встает на свое место, это происходит быстро, но заметно, то-есть не гладко, как бы мерцание получается. А по идее должна просто вставать на место.В фаерфоксе все работает как надо, в той реализации, в которой я показал, а в хроме нет. Мне надо чтобы работало как в примере по ссылке, там у панели также меняется класс, но если таким скриптом менять, каким я показал, она тоже будет мерцать. Вот хочу понять как у них реализовано. Причем у них тоже, пока все скрипты не прогрузятся, при скролле панель мерцает, а после прогрузки уже все работает плавненько

[danik.js]

Нет, я не об этом

Ты уверен? Поставь точку останова в обработчик scroll и ты увидишь, что страница уже проскроллилась и перерисовалась, соответственно div уехал, что и вызывает мерцание.

Честно говоря не знаю как на том сайте решили проблему. Самому интересно.

[tweenfaster]

по моему мы друг друга не понимаем. я ссылку для чего оставил? чтобы был пример. видите как там панель работает в гугл хром? плавно, без мерцания. Вот это я и хочу получить. там все точно также происходит, после скрола меняется класс, и div получает параметр position fixed. Если я эту страничку тупо сохраняю себе на компьютер и открываю в браузере, она работает. Если я некоторые скрипты удаляю, то панель начинает мерцать. Там есть код который точно также тупо меняет класс, но есть что-то еще, что предотвращает мерцание! Как здесь http://www.zopim.com/ сделано? и почему не мерцает?

Я уже наэксперементировался, что вообще не понимаю, почему такая фигня происходит. К примеру если я такой скрипт сделаю в iframe то мерцания нет, это как объяснить?

Вот вариация еще одна http://jsfiddle.net/wS8rN/ - по ссылке все работает плавно, по тому что в iframe сайта работает. Если это все запустить в отдельной страничке, будет мерцать.

[danik.js]

по моему мы друг друга не понимаем

И вправду.

Как здесь http://www.zopim.com/ сделано? и почему не мерцает?

Честно говоря не знаю как на том сайте решили проблему. Самому интересно.

вообще не понимаю, почему такая фигня происходит

Поставь точку останова в обработчик scroll и ты увидишь, что страница уже проскроллилась и перерисовалась, соответственно div уехал, что и вызывает мерцание.

Заметь, что вопросы ты задал позже данных мной на них ответов

Вот мой тестовый пример, где как раз заметно мерцание (в хроме как минимум) по вышеозвученной причине:

<!DOCTYPE html>
<div id="sample" style="height:20px;left:0;right:0;background:red;position:absolute"></div>
<div style="height:5000px;"></div>
<script>
	document.addEventListener('scroll', function() {
		sample.style.position = window.pageYOffset === 0 ? 'absolute' : 'fixed';
	}, true);
</script>

(заодно проверим предположение о фрейме)

[danik.js]

Да, так и есть, тут "мерцания" не наблюдается.
Читал ответы на StackOverflow, там предлагают использовать requestAnimationFrame. Но блин, на zopim.com как-то же без него сделали (вроде бы).

[Aetae]

В былые времена такие панельки сверху делали просто помещая весь контент в div со скролом и высотой 100%, а панельку в другой div закреплённый сверху. Никакого js, никакого мерцания...