Помогите найти причину судорожного подергивания блока

Бочонок

http://frontender.info
Помогите найти причину судорожного подергивания блока

Приятного времени суток.

Написал скриптик, который должен двигать двигать блок при скроле страницы так, что бы он все время был на экране, но не налазил на подвал и шапку.

Сразу оговорю что это должно работать во 2 и 3 FF и 7 IE.

И все бы хорошо... но есть два но:


1. клиент говорит что оно в верхней и нижней точках прежде чем остановиться жутко дергается.

2. у меня оно в том же браузере на том де разрешении двигается очень плавно и красиво. Я теряюсь в догадках. Помогите пожалуйста выяснить в чем беда.


http://nightfolk.net/work/template/page-03/index.html


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

PHP:
event_controller = new event;
event_controller.onHtmlLoad(onloadprocess);
function onloadprocess(){
   var block = document.getElementById('banner_block');
   event_controller.addHandler(window,'scroll',move_block);
   move_block();
}

и далее в зависимости от того насколько прокручена страница определяем какое из трех состояний (вверху, внизу или на 10 точек от верха экрана.).

PHP:
function move_block(){
   var block = document.getElementById('banner_block');
   var footer = document.getElementById('FLfooter');
   var scroll = get_scroll();
   if(scroll>124){
      if(scroll+10+block.offsetHeight>=footer.offsetTop){
         block.className="banner_block_bottom";
      }else{
         block.className="banner_block_fixed";
      }
   }
   if((scroll<=124)&&(block.className!="banner_block")){
      block.className="banner_block";
   }      
}

function get_scroll(){
   if(window.scrollY==undefined){
      return parseInt(document.documentElement.scrollTop);
   }
   return parseInt(window.scrollY);
}

Ну и собственно стили:

PHP:
.banner_block{
position:absolute;
left:-12px;
top:134px;
}

.banner_block_bottom{
position:absolute;
left:-12px;
bottom:130px;
}

.banner_block_fixed{
position:fixed;
top:10px;
margin:0 0 0 -12px;
}


Ничего сверхестественного. Что я мог упустить? Почему оно может дергатся???

Очень рассчитываю на вашу помощь - я в отчаянии.
 

FB3

Новичок
Подергивание есть, если колесиком крутить резко в FF3. Правда, не такое уж оно и заметное.
Чтобы было плавно, обычно делают, чтобы блок плавно начинал движение и плавно заканчивал, то есть за скроллом чуть попозже приезжает блок.
 

Бочонок

http://frontender.info
Ну... судя по всему насколько оно заметное зависит от каких то параметров машины. Вот только у клиента на нескольких очень не слабых машинах оно настолько сильное, что он не хочет принимать работу.
что касается "приезжает", то это значит что мы будем двигать страничку по таймеру. Вместо "красивого" css'ного решения. При этом:
1. больше нагрузка на сервер.
2. больше дергается (не голословно. я после возникновения проблемы перепробовал несколько методов - первый с fixed самый нормальный)

Мне бы выяснить почему дергаеться :(
В середине - когда стоит fixed все в порядке.
А вот при переключении в крайние положения по словам клиента плашка резко скачет вверх или вниз вот так .
причем очень заметно.
Не могу понять с какого перепугу и как с этим бороться.
 

Beavis

Banned
дергается когда резко прокручиваешь..
когда плавно - всё отлично
 

dimagolov

Новичок
Бочонок, не совсем понимаю, что значит дергается, но когда относительно быстро скролируешь, то он уезжает со всем хозяйством за экран а потом резко прыгает назад. после прыжка (при сохранении скорости скрола) уже стоит четко.
FF3
в IE7 нормально

п.с. сделай блок в который дописывай координаты скрола при каждом вызове обработчика. так отследишь сколько было вызовов обработчика и в какие моменты. кроме того, перед заменой класса можно проверять не совпадает ли он уже - может ускорить процесс если броузер тупит с применением нового (хотя и того же) класса.

п.п.с. а зачем
if((scroll<=124)&&(block.className!="banner_block")){
а не
else if (block.className!="banner_block"){
? :)

п.п.п.с. не думаю, что таймер поможет. потому что события таймера имеют меньший приоритет, чем асинхронные (интерфейс), то есть может стать только хуже. я так понимаю, что куски прототайпа используешь? для теста убери его нафиг и цепляй обработчик руками, есть мысть, что не только твой обработчик что-то делает при скроле и пока они отработают, то скрол успевает уйти хрен куда.
 
Сверху