Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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.
Ответить с цитированием
  #2 (permalink)  
Старый 08.08.2013, 07:19
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Никак. Событие scroll возникает когда содержимое элемента прокручено (и как результат - нежелательное смещение блока), далее отрабатывает js, который возвращает на место блок. В итоге наблюдаем скачки.
Выход - либо анимировать движение блока либо пригвоздить его через position:fixed
Ответить с цитированием
  #3 (permalink)  
Старый 08.08.2013, 07:23
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Добавить/удалить класс блоку, при нажатии на другой блок. Vladislav Общие вопросы Javascript 3 28.03.2013 23:13
Динамическая подгрузка контента при прокрутке assd18 AJAX и COMET 11 14.03.2013 14:05
Как сделать чтобы при нажатии мышки появлялся/исчезал блок DIV, а сл.текст сдвигался? goshikvia Элементы интерфейса 19 21.04.2009 16:59
Отрыть DIV блок при переходе с другой страницы BuTbka Общие вопросы Javascript 7 08.04.2009 22:59