Маленький блок "плавает" внутри большого при прокрутке страницы, оставаясь в поле видимости, по возможности.
<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 при быстрой прокрутке блок дергается в эпилептическом припадке. Как можно это исправить?