Иногда это и правда нужно.
Что делаем: плавающий блок на странице, чтобы его содержимое всегда было на экране даже при скролле. При этом чтобы у него было «исходное» место на странице: например, кнопка стоит в начале страницы, а потом мы скроллим страницу вниз, а кнопка залипает. А когда мы скроллим обратно, в нужном месте кнопка прилипает обратно на нужное место.
Зачем: если вы хотите, чтобы пользователь всё время видел какую-то информацию — кнопку с регистрацией, меню или содержимое корзины. Но при этом чтобы это выглядело логично и аккуратно.
Время: 5 минут.
С чем работаем: JavaScript, jQuery и CSS.
Что понадобится: bootstrap для разметки страницы.
Благодаря развитию технологий такую штуку можно сделать буквально за одну команду:
• С помощью css-свойства position:sticky. Тогда всё будет работать именно так, как нам надо, но будет поддерживаться не во всех браузерах.
• С помощью position:fixed. Тогда блок будет просто всё время в одном месте на экране, без «домашнего» положения. Например, кнопка будет всегда висеть в правом верхнем углу экрана, как бы мы ни крутили страницу.
В принципе, поддержка position:sticky становится всё лучше, поэтому можно было бы остановиться на ней. Но ради любви к истории и из соображений паранойи воспользуемся костылями, которыми пользовались разработчики последние 10 лет: используем jQuery.
1. Размечаем страницу
Смысл такой: мы делим страницу на две части: с основным содержимым и плавающий блок. Основной части дадим 10 виртуальных колонок, а плавающему блоку — 2 оставшиеся. Для этого мы используем фреймворк Bootstrap, но можно и просто сверстать что-то вручную.
Если нужно, чтобы блок был слева — поменяйте местами их в коде с основным блоком.
2. Добавляем стили
Стили помогут настроить нам внешний вид каждого блока так, как нам нужно. Их нужно добавить в раздел <style> или подключить отдельным .css-файлом.
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> или вынести в отдельный файл.
По сути, этот скрипт говорит: «Если мы доскроллили ниже этого элемента, скажи ему position:fixed. А если выше, скажи ему position:absolute».
Вопрос из зала: «Почему вы используете jQuery, чтобы тупо обратиться к объекту на странице? Нельзя было просто написать обращение вручную, раз уж вы делаете всё на костылях»?
Отвечает Миша Полянин:
Причины две:
- Sticky работает не всегда правильно во всех браузерах. Бывают ситуации, когда даже в зависимости от версии одного и того же браузера результат на экране и поведение отличаются от ожидаемого.
- Есть элементы, с которыми sticky вообще не работает или работает через раз, например, если у контейнера есть свойство overflow: hidden. А вот jQuery вообще всё равно, какие у кого свойства, главное — получить доступ к нужному элементу, и можно делать с ним что угодно.
Но если подходить к объектам на странице глобально, то получается, что на практике работать с элементами через jQuery получается удобнее:
• удобнее находить нужные элементы по любым свойствам и характеристикам;
• когда таких элементов много, организовать их поточную обработку через jQuery тоже часто получается быстрее;
• не нужно думать о совместимости в браузерах — jQuery-код будет работать одинаково хорошо в любом браузере.
Посмотреть, как работает, и поиграть с кодом на CodePen.
