Закрепить блок при прокрутке
0
0
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
});
});
