Скрытие шапки при скролле вниз с плавным возвратом

<Style>

ДА

Модификации

Шаблоны

Инструменты

Скрытие шапки при скролле вниз с плавным возвратом

18.08.2026

v 1.1

Меню

Zero Block, CSS, Vanilla JS

Решение

Для Zero Block: шапка фиксируется и уезжает вверх при скролле, а при движении вверх — сразу возвращается. Работает через JS, адаптировано под автолейаут и не ломает верстку.

Зачем это нужно и где применять

Для освобождение верхней части экрана, когда пользователь уже начал изучать контент.
В связке с Zero Block и автолейаутом: блок остаётся фиксированной высоты, не «прыгает» при появлении/исчезновении.
Удобно комбинировать с кастомными меню и кастомными кнопками: шапка не перекрывает важные элементы.

Логика работы

Скрипт находит блок по ID *#rec1524014071* и делает его *position: fixed*.
При скролле вниз: как только позиция скролла больше порога *thresholdPx = 500*, шапка уезжает вверх на *height + 10px* — эти 10 px убирают видимую тень и стык.
При скролле вверх: шапка мгновенно возвращается на место — так пользователь сразу видит навигацию. На ресайзе окно пересчитывает позицию, чтобы не было визуальных артефактов.

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

Добавь на страницу блок *T123* (можно в самый низ).

Вставь туда весь код ниже.

В строке *const blockId = #rec1524014071*; замени ID на свой.

Порог и плавность можно менять:

*thresholdPx = 500* — скролл, после которого шапка прячется (в пикселях).
*durationMs = 600* — длительность анимации (мс).

Если используешь автолейаут в Zero Block, убедись, что у самого блока нет конфликтующих стилей position — скрипт сам поставит нужные.

1-5 мин

Скопируй код

Скопировать код

Частые ошибки и как их избежать

Неверный ID блока. Проверь, что в скрипте стоит реальный ID Zero Block (не блока из библиотеки, а именно того, что опубликован на странице).
Конфликт с другими скриптами фиксации. Если у тебя уже есть скрипт, который фиксирует шапку, они могут перебивать друг друга — оставь только один механизм.
Тень «висит» над контентом. Для этого в коде специально добавляют 10 px к высоте: *moveDistance = height + 10*. Не убирай это значение.
Блок «прыгает» при ресайзе. Обработчик resize решает проблему: он сразу ставит нужную позицию в зависимости от текущего скролла.
Автолейаут «ломается». Фиксированный блок выходит из потока — это нормально. Главное, чтобы в Zero Block ты не рассчитывал на его участие в сетке: оставь ему width: 100% и не меняй ширину через автолейаут.

styleda.ru/Пример меню в Zero Block