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

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

5 октября 2019 JavaScript

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

Раньше приходилось реализовывать подобное с нуля и это было не очень просто. Теперь выручает 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
    });
});
Остались вопросы по статье? Задайте их прямо сейчас!
Похожие записи
Автоопределение города по IP на сайте

Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ - это определить Читать далее

Подключение jQuery

jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее

Живой поиск jQuery

Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek. Плагин очень прост в использовании, но в то же Читать далее

Сохранение данных в форме после обновления страницы

Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность Читать далее

Кастомный виджет переводчик для сайта с флагами

Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню с флагами. На данный момент сервис Google Translate Widget больше не поддерживается, но это никак не отразится на сайтах, которые были подключены ранее. Наш кастомный Читать далее

AJAX в 1C-Битрикс

В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например для бесконечного скролла новостей. Но есть и более простой способ, с помощью которого можно загружать ответ любого компонента без перезагрузки страницы. Его мы и рассмотрим Читать далее

Отправка письма с вложениями на PHP и AJAX

Мы уже рассматривали, как сделать форму обратной связи на PHP и Ajax. Сегодня мы модернизируем её и научим отправлять приложенные файлы. HTML-код формы Добавляем в форму ещё одно поле файл: <form id="feedback-form" action=""> <input type="text" name="name" required placeholder="Ваше имя"> <input Читать далее

Один комментарий на «Закрепить блок при прокрутке»

  1. Roman:

    Отлично! То, что надо!

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

*

code