Показать сообщение отдельно
  #1 (permalink)  
Старый 08.08.2013, 03:25
Новичок на форуме
Отправить личное сообщение для seugene Посмотреть профиль Найти все сообщения от seugene
 
Регистрация: 08.08.2013
Сообщений: 1

Плавающий блок мигает при прокрутке
Маленький блок "плавает" внутри большого при прокрутке страницы, оставаясь в поле видимости, по возможности.

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

Последний раз редактировалось seugene, 08.08.2013 в 03:30.
Ответить с цитированием