Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Плавающий блок мигает при прокрутке (https://javascript.ru/forum/dom-window/40500-plavayushhijj-blok-migaet-pri-prokrutke.html)

seugene 08.08.2013 03:25

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

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

danik.js 08.08.2013 07:19

Никак. Событие scroll возникает когда содержимое элемента прокручено (и как результат - нежелательное смещение блока), далее отрабатывает js, который возвращает на место блок. В итоге наблюдаем скачки.
Выход - либо анимировать движение блока либо пригвоздить его через position:fixed

danik.js 08.08.2013 07:23

Как минимум эти строки можно вынести из функции-обработчика, ибо они медленные.
var div0 = document.getElementById('fldiv0');
    var div1 = document.getElementById('fldiv1');
....
    div0.style.verticalAlign = 'top'; //если js работает, то включаем выравнивание по верхнему краю


Часовой пояс GMT +3, время: 17:38.