Как скрыть/показать панель уведомлений при прокрутке

От автора: в предыдущем уроке мы узнали, как скрыть и показать липкий заголовок при прокрутке. Сегодня давайте создадим нечто подобное: липкий заголовок, верхняя часть которого (заголовок панели уведомлений) исчезнет при прокрутке вниз и появится при прокрутке вверх.

Что мы создаем?

Ссылка на предыдущий урок. Вот что мы собираемся создать в этом уроке (прокрутите, чтобы проверить поведение):

Начните с разметки страницы

Заголовок будет состоять из двух частей: верхней и нижней.

В верхней части будет специальное уведомление о бесплатной доставке и контактная информация.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Нижняя часть будет содержать логотип компании и меню. По умолчанию меню не появляется.

Как скрыть/показать панель уведомлений при прокрутке

Эта структура заголовка распространена, особенно в магазинах электронной коммерции. Заголовок/панель уведомлений используется для уведомления пользователей о специальных скидках, акциях, информации о доставке и других вещах. Они играют очень важную роль, поскольку являются первым, что видит посетитель на сайте. Умная панель уведомлений может привлечь больше покупателей и повысить продажи.

Как скрыть/показать панель уведомлений при прокрутке

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

Определим несколько вспомогательных классов

Для простоты мы обсудим только стили, относящиеся к заголовку. Вы можете изучить все стили проекта, кликнув вкладку CSS демонстрационного проекта.

Чтобы стилизовать заголовок, нам понадобятся несколько вспомогательных классов. Вместо того, чтобы включать фреймворк CSS, такой как Tailwind, давайте сами определим эти классы:

Укажем стили заголовков

На маленьких экранах (<600 пикселей) макет заголовка будет выглядеть следующим образом:

Как скрыть/показать панель уведомлений при прокрутке

На экранах от 600 до 899 пикселей, макет будет выглядеть следующим образом:

Как скрыть/показать панель уведомлений при прокрутке

Наконец, на больших экранах (≥900 пикселей) он будет иметь следующий вид:

Как скрыть/показать панель уведомлений при прокрутке

Отметим основные стили:

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

Нижняя часть будет расположена прямо под верхней частью. Как мы увидим чуть позже, мы будем использовать JavaScript для вычисления значения свойства top.

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

Вот связанные стили:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Добавим JavaScript

Для следующего шага добавим поведение в заголовок.

Рассчитаем Offsets

Когда DOM будет готов и когда мы изменим размер окна браузера, сработает функция calculateOffsets(). Эта функция будет отвечать за установку значения свойства top нижней части заголовка и значения свойства padding-top нашего body. Эти действия необходимы, поскольку обе части заголовка являются фиксированными элементами, поэтому они полностью удалены из обычного потока документов. Вот необходимый код JavaScript:

Переключим меню

Каждый раз, когда мы нажимаем на кнопку-переключатель, видимость меню меняется. Если меню скрыто, то оно появится, и наоборот. Вот соответствующий код JavaScript:

И стили:

Переключим заголовок панели

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

По поводу функциональности:

По мере прокрутки вниз объект body получит класс scroll-down. На этом этапе верхняя панель будет анимирована вверх и станет скрытой. При этом нижняя часть будет анимирована выше и займет пустое место, плюс мы пересчитаем значение свойства padding-top.

По мере прокрутки вверх объект body получит класс scroll-up. Обратите внимание, что нам этот класс не понадобится, но он будет в нашем распоряжении, если мы захотим позже изменить демонстрационные стили с помощью CSS. На этом этапе мы удалим преобразования CSS из частей заголовка и снова пересчитаем значение свойства padding-top.

Если мы прокрутим страницу вверх, она потеряет свой scroll-up.

Вот (довольно обширный!) Код JavaScript для обработки всего этого:

И связанные стили:

Заключение

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

Как всегда, большое спасибо за чтение!

Автор: George Martsoukos

Источник: webdesign.tutsplus.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.