Плавающий блок мигает при прокрутке
Маленький блок "плавает" внутри большого при прокрутке страницы, оставаясь в поле видимости, по возможности.
<div id="fldiv0" style="vertical-align:bottom;"> //по умолчанию внутренний блок внизу <div id="fldiv1" style="position:relative;"> //относительное позиционирование Текст </div> </div> function abscoordY(elem) //абсолютные координаты элемента { return elem.offsetParent ? elem.offsetTop + abscoordY( elem.offsetParent ) : elem.offsetTop; } function movefldiv() { var div0 = document.getElementById('fldiv0'); var div1 = document.getElementById('fldiv1'); var scrollY = window.scrollY || document.body.scrollTop; //сколько прокручено var Y0 = abscoordY(div0); //Y-координата большего блока var dH = div0.offsetHeight - div1.offsetHeight; // высота div0 - высота div1 div0.style.verticalAlign = 'top'; //если js работает, то включаем выравнивание по верхнему краю if( scrollY > Y0 ) // если прокрутили ниже верхнего края большего блока { Y = Math.min(dH, scrollY - Y0); div1.style.top = Y; } else { div1.style.top = '0'; } } window.onscroll = function() { movefldiv(); } Посмотреть можно тут http://ijkl.ru/ В Firefox и Opera работает отлично, но в IE и в Chrome при быстрой прокрутке блок дергается в эпилептическом припадке. Как можно это исправить? |
Никак. Событие scroll возникает когда содержимое элемента прокручено (и как результат - нежелательное смещение блока), далее отрабатывает js, который возвращает на место блок. В итоге наблюдаем скачки.
Выход - либо анимировать движение блока либо пригвоздить его через position:fixed |
Как минимум эти строки можно вынести из функции-обработчика, ибо они медленные.
var div0 = document.getElementById('fldiv0'); var div1 = document.getElementById('fldiv1'); .... div0.style.verticalAlign = 'top'; //если js работает, то включаем выравнивание по верхнему краю |
Часовой пояс GMT +3, время: 17:38. |