Yandex Metrika
sanches.free

Фиксированная шапка реагирует на направление скролла: уезжает вниз при чтении, возвращается при попытке вернуться

Разбор задачи

Вешают слушатель 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 дней гарантии