Skip to main content

Прикрепление элементов при скролле

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

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

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

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

<script src="jquery.js"></script>
<script src="jquery.sticky.js"></script>

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code