Как скрыть/показать панель уведомлений при прокрутке
Что мы создаем?
Содержание статьи:
Ссылка на предыдущий урок. Вот что мы собираемся создать в этом уроке (прокрутите, чтобы проверить поведение):
Начните с разметки страницы
Заголовок будет состоять из двух частей: верхней и нижней.
В верхней части будет специальное уведомление о бесплатной доставке и контактная информация.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Нижняя часть будет содержать логотип компании и меню. По умолчанию меню не появляется.
Эта структура заголовка распространена, особенно в магазинах электронной коммерции. Заголовок/панель уведомлений используется для уведомления пользователей о специальных скидках, акциях, информации о доставке и других вещах. Они играют очень важную роль, поскольку являются первым, что видит посетитель на сайте. Умная панель уведомлений может привлечь больше покупателей и повысить продажи.
Помимо заголовка, чтобы создать прокрутку для эффекта тестирования, мы также укажем несколько фиктивных разделов. Вот разметка заголовка:
<header class=”page-header”> <nav> <div class=”header-top”> <div class=”container”> <div class=”d-flex flex-column flex-row@s justify-content-between text-center”> <div>…</div> <div>…</div> </div> </div> </div><!– /header-top –> <div class=”header-bottom”> <div class=”container”> <div class=”d-flex justify-content-between”> <a href=””> <img width=”178″ height=”38″ src=”horizontal-logo-mobile.svg” alt=”forecastr logo”> </a> <div class=”d-flex”> <ul class=”menu d-flex flex-column flex-row@m align-items-center justify-content-between”>…</ul> <button aria-label=”Toggle menu” class=”toggle-menu”> <svg aria-hidden=”true” width=”30″ height=”30″ viewBox=”0 0 24 24″> <path d=”M4 22h-4v-4h4v4zm0-12h-4v4h4v-4zm0-8h-4v4h4v-4zm3 0v4h17v-4h-17zm0 12h17v-4h-17v4zm0 8h17v-4h-17v4z” /> </svg> </button> </div> </div> </div> </div><!– /header-bottom –> </nav> </header> <!– sections here –>
| 12345678910111213141516171819202122232425262728293031 | <header class=”page-header”> <nav> <div class=”header-top”> <div class=”container”> <div class=”d-flex flex-column flex-row@s justify-content-between text-center”> <div>…</div> <div>…</div> </div> </div> </div><!– /header-top –> <div class=”header-bottom”> <div class=”container”> <div class=”d-flex justify-content-between”> <a href=””> <img width=”178″ height=”38″ src=”horizontal-logo-mobile.svg” alt=”forecastr logo”> </a> <div class=”d-flex”> <ul class=”menu d-flex flex-column flex-row@m align-items-center justify-content-between”>…</ul> <button aria-label=”Toggle menu” class=”toggle-menu”> <svg aria-hidden=”true” width=”30″ height=”30″ viewBox=”0 0 24 24″> <path d=”M4 22h-4v-4h4v4zm0-12h-4v4h4v-4zm0-8h-4v4h4v-4zm3 0v4h17v-4h-17zm0 12h17v-4h-17v4zm0 8h17v-4h-17v4z” /> </svg> </button> </div> </div> </div> </div><!– /header-bottom –> </nav></header> <!– sections here –> |
Определим несколько вспомогательных классов
Для простоты мы обсудим только стили, относящиеся к заголовку. Вы можете изучить все стили проекта, кликнув вкладку CSS демонстрационного проекта.
Чтобы стилизовать заголовок, нам понадобятся несколько вспомогательных классов. Вместо того, чтобы включать фреймворк CSS, такой как Tailwind, давайте сами определим эти классы:
CSS .container { padding: 0 15px; max-width: 100%; } .d-flex { display: flex; } .flex-column { flex-direction: column; } .align-items-center { align-items: center; } .justify-content-between { justify-content: space-between; } .text-center { text-align: center; } @media (min-width: 600px) { .container { padding: 0 30px; } .flex-row@s { flex-direction: row; } } @media (min-width: 900px) { .flex-row@m { flex-direction: row; } }
| 12345678910111213141516171819202122232425262728293031323334353637383940 | .container { padding: 0 15px; max-width: 100%;} .d-flex { display: flex;} .flex-column { flex-direction: column;} .align-items-center { align-items: center;} .justify-content-between { justify-content: space-between;} .text-center { text-align: center;} @media (min-width: 600px) { .container { padding: 0 30px; } .flex-row@s { flex-direction: row; }} @media (min-width: 900px) { .flex-row@m { flex-direction: row; }} |
Укажем стили заголовков
На маленьких экранах (
Источник: webformyself.com