Как избежать мерцания div при изменении его класса функцией addClass в Chrome?
Столкнулся с проблемой, именно в 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 вообще убрать этот параметр, то смена класса происходит без мерцания. |
О каком мерцании речь?
Событие scroll происходит после того, как страница проскроллилась. То есть твой div сначала проскроллится немного, потом когда присвоишь класс - встанет на место. Ты об этом? Кстати в FF вроде такое не наблюдается, там чуть иначе идет обработка события. |
Нет, я не об этом. Правильно, она встает на место как положено, но при этом происходит полная перерисовка div, панель исчезает и появляется, а не просто встает на свое место, это происходит быстро, но заметно, то-есть не гладко, как бы мерцание получается. А по идее должна просто вставать на место.В фаерфоксе все работает как надо, в той реализации, в которой я показал, а в хроме нет. Мне надо чтобы работало как в примере по ссылке, там у панели также меняется класс, но если таким скриптом менять, каким я показал, она тоже будет мерцать. Вот хочу понять как у них реализовано. Причем у них тоже, пока все скрипты не прогрузятся, при скролле панель мерцает, а после прогрузки уже все работает плавненько
|
Цитата:
Честно говоря не знаю как на том сайте решили проблему. Самому интересно. |
по моему мы друг друга не понимаем. я ссылку для чего оставил? чтобы был пример. видите как там панель работает в гугл хром? плавно, без мерцания. Вот это я и хочу получить. там все точно также происходит, после скрола меняется класс, и div получает параметр position fixed. Если я эту страничку тупо сохраняю себе на компьютер и открываю в браузере, она работает. Если я некоторые скрипты удаляю, то панель начинает мерцать. Там есть код который точно также тупо меняет класс, но есть что-то еще, что предотвращает мерцание! Как здесь http://www.zopim.com/ сделано? и почему не мерцает?
Я уже наэксперементировался, что вообще не понимаю, почему такая фигня происходит. К примеру если я такой скрипт сделаю в iframe то мерцания нет, это как объяснить? Вот вариация еще одна http://jsfiddle.net/wS8rN/ - по ссылке все работает плавно, по тому что в iframe сайта работает. Если это все запустить в отдельной страничке, будет мерцать. |
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Вот мой тестовый пример, где как раз заметно мерцание (в хроме как минимум) по вышеозвученной причине:
<!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>
(заодно проверим предположение о фрейме) |
Да, так и есть, тут "мерцания" не наблюдается.
Читал ответы на StackOverflow, там предлагают использовать requestAnimationFrame. Но блин, на zopim.com как-то же без него сделали (вроде бы). |
В былые времена такие панельки сверху делали просто помещая весь контент в div со скролом и высотой 100%, а панельку в другой div закреплённый сверху. Никакого js, никакого мерцания...
|
| Часовой пояс GMT +3, время: 20:12. |