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

Решение

Для Zero Block: шапка фиксируется и уезжает вверх при скролле, а при движении вверх — сразу возвращается. Работает через JS, адаптировано под автолейаут и не ломает верстку.
Зачем это нужно и где применять
Для освобождение верхней части экрана, когда пользователь уже начал изучать контент.
В связке с Zero Block и автолейаутом: блок остаётся фиксированной высоты, не «прыгает» при появлении/исчезновении.
Удобно комбинировать с кастомными меню и кастомными кнопками: шапка не перекрывает важные элементы.
Логика работы
Скрипт находит блок по ID #rec1524014071 и делает его position: fixed.
При скролле вниз: как только позиция скролла больше порога thresholdPx = 500, шапка уезжает вверх на height + 10px — эти 10 px убирают видимую тень и стык.
При скролле вверх: шапка мгновенно возвращается на место — так пользователь сразу видит навигацию. На ресайзе окно пересчитывает позицию, чтобы не было визуальных артефактов.

<script>
(function() {
const blockId = '#rec1524014071'; // ID шапки
const thresholdPx = 500; // прятать после 150px скролла вниз
const durationMs = 600; // плавность анимации (600 мс)

const block = document.querySelector(blockId);
if (!block) return;

// Базовые стили для фиксации
block.style.willChange = 'transform';
block.style.transition = `transform ${durationMs}ms ease`;
block.style.position = 'fixed';
block.style.top = '0';
block.style.width = '100%';
block.style.zIndex = '99999';

let lastScrollY = window.scrollY;

function handleScroll() {
const scrollY = window.scrollY;
const delta = scrollY - lastScrollY; // >0 вниз, <0 вверх

const height = block.offsetHeight;
const moveDistance = height + 10; // <-- тут добавляем 10px, чтобы тень не была видна

// Если скроллим ВВЕРХ — сразу показываем шапку
if (delta < 0) {
block.style.transform = 'translateY(0)';
}
// Если скроллим ВНИЗ и прошли порог — прячем шапку выше на 10px
else if (scrollY > thresholdPx) {
block.style.transform = `translateY(-${moveDistance}px)`;
}
// Иначе (мало прокрутили вниз) — показываем
else {
block.style.transform = 'translateY(0)';
}

lastScrollY = scrollY;
}

window.addEventListener('scroll', handleScroll, { passive: true });
window.addEventListener('resize', () => {
// При ресайзе корректируем позицию, если нужно
if (window.scrollY > thresholdPx) {
const height = block.offsetHeight;
const moveDistance = height + 10;
block.style.transform = `translateY(-${moveDistance}px)`;
} else {
block.style.transform = 'translateY(0)';
}
}, { passive: true });
})();
</script>

Полностью код и пошаговая инструкция