Предположим нам нужно сделать в сайдбаре (или любой другой области ) последний виджет (почему последний узнаете в конце статьи) (или любой элемент ) фиксированным. То есть при прокрутке он должен опускаться и оставаться видимым.
Так это выглядит схематически
Шаг 1. Вставляем скрипт в тело страницы:
[php]
var node = document.getElementById(‘side’),
nodeOffs = node.offsetTop,
parent = node;
while(parent = parent.offsetParent)
if(parent.offsetTop)
nodeOffs += parent.offsetTop;
window.addEventListener(‘scroll’, function(event){
var scrollPos = document.body.scrollTop;
if(scrollPos > nodeOffs){
if(scrollPos < (document.body.scrollHeight – node.clientHeight – nodeOffs))
node.style.top = (scrollPos – nodeOffs) + ‘px’;
}else{
node.style.top = ‘0px’;
}
});
[/php]
Шаг 2. Далее обязательно добавляем стили:
[php]
#side{
position: relative; /* <- Обязательный параметр*/
}
[/php]
Теперь объясню почему именно последний вижджет может быть фиксированнный. Если мы сделаем первый вижет фиксированный он будет наезжать на все последующие виджеты. Если Вы хотите сделать первый виджет фиксированный, читайте статью: как сделать первый или второй виджет фиксированный.
