logo частный фрилансер Москва

Как сделать фиксированный виджет без плагина

27 июня 2015 в 18:23 Блог веб-разработчика
Хотите я произведу настройку как описано в статье вместо вас? Стоимость работы: 500 руб. Срок исполнения: 1 час. Работаю без предоплаты.

Предположим нам нужно сделать в сайдбаре (или любой другой области ) последний виджет (почему последний узнаете в конце статьи) (или любой элемент ) фиксированным. То есть при прокрутке он должен опускаться и оставаться видимым.

Как сделать фиксированный виджет

Так это выглядит схематически

Шаг 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]

Теперь объясню почему именно последний вижджет может быть фиксированнный. Если мы сделаем первый вижет фиксированный он будет наезжать на все последующие виджеты. Если Вы хотите сделать первый виджет фиксированный, читайте статью: как сделать первый или второй виджет фиксированный.

Похожие статьи

Оставить заявку
Для экономии вашего времени на все вопросы отвечают программисты/сеошники/маркетологи, а не секретари или офис-менеджеры. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

Введите контактный E-mail: *

Ваш вопрос:

Пожалуйста, докажите, что вы человек, выбрав чашку.

Рассчитать стоимость
Для экономии вашего времени на все вопросы отвечают программисты/сеошники/маркетологи, а не секретари или офис-менеджеры. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

Прикрепить файл:

Ваш вопрос:

Введите контактный E-mail: *

Заказать обратный звонок
Для экономии вашего времени на все звонки отвечают программисты, а не секретари или офис-менеджеры. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

Введите ваше имя *

Как с вами связаться? *

Введите контактный телефон *

Корзина пуста