Закрепить блок при прокрутке
5 октября 2019 JavaScript jQuery
Возникла задача сделать прикрепление сайдбара, такое же, как в ВКонтакте. При скролле до верхней границы элемента он закрепляется, а при достижении определенного уровня останавливается и прокручивается до конца вместе со страницей.
Раньше приходилось реализовывать подобное с нуля и это было не очень просто. Теперь выручает 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 блока, который нужно закрепить.
Подборка бесплатных IT-курсов и вебинаров от Skillbox.
Бесплатные IT-курсы, нужно только пройти онлайн-тест здесь
Бесплатные вебинары здесь
Проверяем. Работает!
Что такое TypeScript и для чего используют typescript
Но мне было ещё необходимо сделать отступ у блока сверху, так как при скролле закреплялось верхнее меню. Ну и при достижении 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
});
});
Если мы используем JavaScript, то некоторые действия по умолчанию нужно отменить. Самый распространённый случай это клик по ссылке. К примеру при нажатии должно появляться всплывающее окно, но по умолчанию браузер будет переходить по URL. Если в атрибуте href указать знак Читать далее
Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ - это определить Читать далее
jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее
Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek. Плагин очень прост в использовании, но в то же Читать далее
Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность Читать далее
Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню с флагами. На данный момент сервис Google Translate Widget больше не поддерживается, но это никак не отразится на сайтах, которые были подключены ранее. Наш кастомный Читать далее
В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например для бесконечного скролла новостей. Но есть и более простой способ, с помощью которого можно загружать ответ любого компонента без перезагрузки страницы. Его мы и рассмотрим Читать далее
Отлично! То, что надо!
гонки без интернета
badoo старые версии
астробой скачать на телефон бесплатно игру
скачать гонки на андроид бесплатно без интернета
как скачать симс 4 на телефон
[url=https://top-android.org/games/]играть андроид скачать[/url]