Получить консультацию

Кратко о видео

В уроке разобраны: перевод хедера в position fixed с z-index, виджет MZ для подключения JS-скрипта, обязательный класс header на блоке шапки, CSS transition для плавного скрытия, параметры offset (через сколько пикселей скролла прятать). Скрипт через MZ слушает событие scroll и добавляет класс-модификатор на header при скролле ниже offset. Класс-модификатор меняет transform: translateY(-100%) — шапка уходит вверх. Transition на самом хедере делает анимацию плавной. Урок для тех, кто хочет профессиональный хедер с интерактивным поведением. Базовое понимание position fixed, z-index и принципа работы MZ-виджета нужно. Если не работал с MZ — посмотри сначала базовый урок по виджету.

Плавающий скрывающийся хедер в Taptop

Хочешь хедер, который прячется при прокрутке вниз и появляется при прокрутке вверх. Видел такое на современных сайтах. Как сделать это в Taptop? Нужен ли JavaScript?

Хедер переводится в fixed-позиционирование с z-index. Добавляется виджет Embed с готовым JS-кодом — ссылка в описании видео. Код работает через класс: шапке обязательно задаётся класс header. Для тех, кто уже верстает в Taptop. После просмотра делаешь скрывающийся хедер с готовым кодом без написания JavaScript с нуля.

Тайминги видео

00:00 — Как-то раз я мучился несколько часов 00:39 — контента. Проверяем. Теперь он надёжно закреплён 01:19 — у диво в меню Срол и