Что делаем: плавающий блок на странице, чтобы его содержимое всегда было на экране даже при скролле. При этом чтобы у него было «исходное» место на странице: например, кнопка стоит в начале страницы, а потом мы скроллим страницу вниз, а кнопка залипает. А когда мы скроллим обратно, в нужном месте кнопка прилипает обратно на нужное место.
Зачем: если вы хотите, чтобы пользователь всё время видел какую-то информацию — кнопку с регистрацией, меню или содержимое корзины. Но при этом чтобы это выглядело логично и аккуратно.
Время: 5 минут.
С чем работаем: JavaScript, jQuery и CSS.
Что понадобится: bootstrap для разметки страницы.
👉 Благодаря развитию технологий такую штуку можно сделать буквально за одну команду:
- С помощью css-свойства position:sticky. Тогда всё будет работать именно так, как нам надо, но будет поддерживаться не во всех браузерах.
- С помощью position:fixed. Тогда блок будет просто всё время в одном месте на экране, без «домашнего» положения. Например, кнопка будет всегда висеть в правом верхнем углу экрана, как бы мы ни крутили страницу.
В принципе, поддержка position:sticky становится всё лучше, поэтому можно было бы остановиться на ней. Но ради любви к истории и из соображений паранойи воспользуемся костылями, которыми пользовались разработчики последние 10 лет: используем jQuery.
1. Размечаем страницу
Смысл такой: мы делим страницу на две части: с основным содержимым и плавающий блок. Основной части дадим 10 виртуальных колонок, а плавающему блоку — 2 оставшиеся. Для этого мы используем фреймворк Bootstrap, но можно и просто сверстать что-то вручную.
Если нужно, чтобы блок был слева — поменяйте местами их в коде с основным блоком.
<section>
<div class="row">
<!-- основной блок шириной 10 колонок -->
<div class="col-md-10">
<!-- сюда кладём то, что будет вести себя как обычная страница -->
<div class="content-block">
<h3>Заголовок</h3>
<p>Тут — любой текст, картинки или что-то ещё. Это же бутстрап, здесь можно всё.</p>
</div>
</div>
<!-- А здесь — наш плавающий блок -->
<div class="col-md-2">
<div class="float-block">
<!-- здесь тоже можно прописать что угодно -->
</div>
</div>
</div>
</section>2. Добавляем стили
Стили помогут настроить нам внешний вид каждого блока так, как нам нужно. Их нужно добавить в раздел <style> или подключить отдельным .css-файлом.
/* отвечает за оба блока в целом */
section{
max-width: 600px;
margin:0 auto;
}
/* настройки основного блока */
.col-md-10{
min-height: 900px;
}
.content-block{
padding: 15px;
}
/* настройки плавающего блока */
/* для наглядности это будет пока красный квадрат */
.float-block{
background-color: red;
height: 50px;
width: 50px;
position:absolute;
top: 150px;
}3. Включаем «липкость»
Логика такая: нужный нам блок (например, кнопка) живёт в странице как обычный объект. Но когда мы доскролливаем до определённого места, этот блок «вырывается» из общего потока страницы и прикрепляется к экрану справа наверху.
Это поведение в современных браузерах реализовывается в css так:
.float-block{position:sticky}
Но мы ориентируемся не только на современные браузеры. Поэтому используем тяжёлую артиллерию.
Подключаем jQuery к странице в разделе <head>:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
Теперь добавляем скрипт, который даст нам нужное поведение для блоков. Его можно добавить тегом <script> или вынести в отдельный файл.
// «Липкий» код
$(function(){
$.fn.followTo = function (pos) {
var $this = this,
$window = $(window);
$window.scroll(function (e) {
if ($window.scrollTop() > pos) {
$this.css({
position: 'fixed',
top: 10
});
} else {
$this.css({
position: 'absolute',
top: 150
});
}
});
};
$('.float-block').followTo(140);
});По сути, этот скрипт говорит: «Если мы доскроллили ниже этого элемента, скажи ему position:fixed. А если выше, скажи ему position:absolute».
Вопрос из зала: «Почему вы используете jQuery, чтобы тупо обратиться к объекту на странице? Нельзя было просто написать обращение вручную, раз уж вы делаете всё на костылях»?
Отвечает Миша Полянин:
Причины две:
- Sticky работает не всегда правильно во всех браузерах. Бывают ситуации, когда даже в зависимости от версии одного и того же браузера результат на экране и поведение отличаются от ожидаемого.
- Есть элементы, с которыми sticky вообще не работает или работает через раз, например, если у контейнера есть свойство overflow: hidden. А вот jQuery вообще всё равно, какие у кого свойства, главное — получить доступ к нужному элементу, и можно делать с ним что угодно.
Но если подходить к объектам на странице глобально, то получается, что на практике работать с элементами через jQuery получается удобнее:
- удобнее находить нужные элементы по любым свойствам и характеристикам;
- когда таких элементов много, организовать их поточную обработку через jQuery тоже часто получается быстрее;
- не нужно думать о совместимости в браузерах — jQuery-код будет работать одинаково хорошо в любом браузере.
Посмотреть, как работает, и поиграть с кодом на CodePen.
