document.addEventListener('DOMContentLoaded', () => {
  const header = document.querySelector('#recYOURID'); // подставь ID хедера
  if (!header) return;

  let prev = window.pageYOffset, ticking = false, solidAt = 40, hysteresis = 6;

  function onScroll() {
    const y = window.pageYOffset;
    // фон после прокрутки
    header.classList.toggle('header-solid', y > solidAt);
    // направление + гистерезис, чтобы не дёргалось
    if (y - prev > hysteresis && y > solidAt) header.classList.add('header-hide');
    else if (prev - y > hysteresis) header.classList.remove('header-hide');
    prev = y;
    ticking = false;
  }

  window.addEventListener('scroll', () => {
    if (!ticking) { requestAnimationFrame(onScroll); ticking = true; }
  }, { passive: true });
});


/* применяем плавность */
#recYOURID { transition: transform .35s ease, opacity .35s ease; will-change: transform, opacity; }

/* скрыт при скролле вниз — уезжает и тает */
.header-hide { transform: translateY(-100%); opacity: 0; }

/* опционально: при прилипании добавь фон/тень */
.header-solid { background: rgba(24,24,24,.65); backdrop-filter: blur(6px); }