Закрепить блок при прокрутке

5 октября 2019 JavaScript jQuery

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

Раньше приходилось реализовывать подобное с нуля и это было не очень просто. Теперь выручает jQuery плагин Sticky. С ним можно реализовать множество задач с прикреплением элементов, а так же у него достаточное количество настроек и методов.

Скачиваем плагин на этом сайте.

Подключаем библиотеку jQuery и плагин примерно так:

И инициализируем плагин:

  $(document).ready(function(){
    $("#sticker").sticky({topSpacing:0});
  });

#sticker — ID блока, который нужно закрепить.

Проверяем. Работает!

Но мне было ещё необходимо сделать отступ у блока сверху, так как при скролле закреплялось верхнее меню. Ну и при достижении footer, чтобы он останавливался. Тут все просто, у плагина есть опции topSpacing и bottomSpacing это соответственно и есть нужные отступы сверху и снизу. В переменных topMenuHeight и footerHeight им я передал высоту блока с меню и высоту футера предварительно вычислив их с помощью jQuery.

$(document).ready(function(){
    var topMenuHeight = $("#top-menu").height();
    var footerHeight = $("footer").height();
    $(".sidebar-right").sticky({
        topSpacing:topMenuHeight,
        bottomSpacing:footerHeight
    });
    $(".sticky-right-sidebar").sticky({
        topSpacing:topMenuHeight,
        bottomSpacing:footerHeight
    });
});