+7-499-70-300-44
заказать звонок
Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Спасибо за оставленную заявку
Ожидайте звонка

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

Блог вебмастера

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

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

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

Шаг 1. Вставляем скрипт в тело страницы:


 
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';
    }
});    

Шаг 2. Далее обязательно добавляем стили:


#side{
    position: relative;  /* <- Обязательный параметр*/
}

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

Другие статьи

Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

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

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

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для обсуждения деталей,
необходимых для расчета стоимости проекта.

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

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

Введите адрес сайта, который нуждается в продвижении *

Указать точное время звонка

или позвоните нам по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

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

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

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Хочу так же
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей.

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

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

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
[contact-form-7 404 "Not Found"]
Спасибо за оставленную заявку
Ожидайте звонка
Заказ СЕО продвижения
Введите ваше имя и телефон.
Я лично свяжусь с Вами для обсуждения деталей.

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

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

Введите ваш Скайп *

Спасибо за оставленную заявку
Ожидайте звонка