Фиксированная шапка реагирует на направление скролла: уезжает вниз при чтении, возвращается при попытке вернуться
Разбор задачи
Вешают слушатель window scroll с сохранением предыдущей позиции. Превышение небольшого порога задаёт режим collapsed/expanded только при устойчивом изменении delta.
(() => {
const bar = document.getElementById('site-fixed-bar');
let lastKnownY = window.scrollY || 0;
let frame;
window.addEventListener(
'scroll',
() => {
if (frame) return;
frame = requestAnimationFrame(() => {
const y = window.scrollY || window.pageYOffset;
const delta = y - lastKnownY;
const hidden = delta > 6 && y > 80;
const revealed = delta < -6 || y < 40;
if (hidden) bar.classList.add('bar-is-away');
if (revealed) bar.classList.remove('bar-is-away');
lastKnownY = y;
frame = undefined;
});
},
{ passive: true },
);
})();Для интернет-магазина добавьте блокировку скрытия, если открыт мини-бар корзины, чтобы пользователь всегда видел сумму заказа.
Замечания перед выкладкой
Вносите правки только через среду с бэкапом и понятным diff. Если сниппет идёт в шаблон на Битрикс, проверьте конфликт с уже подключённым jQuery/UI и включите «отложенный» запуск там, где длинный главный файл может обрезать DOMContentLoaded.
Не хотите копаться сами?
Починю за 1-3 дня. Без предоплаты — оплата по результату.
15+ лет опыта с 1С-Битрикс · Без предоплаты · 7 дней гарантии