Как сделать плавающий (скрывающийся) хедер

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

Смотрите видео:

https://vk.com/video-219751701_456239441

VK Видео | YouTube | Rutube

Пошаговая инструкция

Шаг 1: Закрепите хедер

1. Выберите секцию с хедером.
2. Измените позиционирование на Фиксированное (Fixed) и установите Z-index побольше (например 10), чтобы хедер всегда находился поверх остальных элементов.

Теперь хедер закреплен в верхней части экрана.

Шаг 2: Добавьте код для управления хедером

1. Добавьте на страницу виджет Embed (доступен на тарифах Team и Business).
2. Дважды кликните по нему и вставьте JS-код, который отслеживает направление скролла и управляет поведением хедера:

<script>

let lastScrollTop = 0;
const header = document.querySelector('.header');
let isThrottled = false;
const throttleDelay = 100; // миллисекунды, интервал между обработками scroll

function onScroll() {
const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (currentScroll > lastScrollTop) {
// Скролл вниз — скрываем
header.style.transform = 'translateY(-100%)';
} else {
// Скролл вверх — показываем
header.style.transform = 'translateY(0)';
}
lastScrollTop = Math.max(0, currentScroll);
}

window.addEventListener('scroll', () => {
if (!isThrottled) {
onScroll();
isThrottled = true;
setTimeout(() => {
isThrottled = false;
}, throttleDelay);
}
});

</script>

Шаг 3: Подготовьте хедер к работе с кодом

Чтобы скрипт работал корректно:

1. Добавьте хедеру класс header (название должно совпадать с тем, что используется в коде).

2. Установите значение 0px сверху в позиционировании.

3. Добавьте Переход для плавного появления и исчезания.

Шаг 4: Настройте параметры меню

Установите у Div-блоков с меню Menu Scroll и Menu Overlay параметр высоты в 100vh.

Это предотвратит ошибки отображения при открытии меню.

Шаг 5: Проверьте результат

Опубликуйте проект и протестируйте работу:

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

Резюме

Чтобы создать динамический хедер в Taptop:

1. Задайте хедеру позиционирование Fixed и Z-index 10.
2. Добавьте виджет Embed с готовым кодом.
3. Назначьте хедеру класс header, позиционирование сверху 0px и добавьте плавный переход.
4. Установите высоту для Menu Scroll и Menu Overlay в 100vh.
5. Опубликуйте проект и протестируйте результат.