Как сделать плавное появление и скрытие фиксированного меню при скролле страницы на Тильде

Этот скрипт управляет поведением фиксированной шапки в Тильде.
При прокрутке вниз (после 600px) шапка прячется.
При прокрутке вверх — снова показывается.
До 600px от верха шапка всегда видна.

Что нужно поменять в коде, чтобы он работал именно у тебя:

#rec1229876396 — это ID блока Zero Block, в котором находится твоя шапка. Найди ID у своего блока и подставь его.
const TRIGGER = 600; — число пикселей, после которого начинает работать эффект. Можно уменьшить или увеличить (например, 300 или 800).
const DELTA = 8; — минимальная чувствительность скролла. Если оставить маленькое, шапка будет «дёргаться».

Куда вставлять:

Если нужно, чтобы код работал только на одной странице:
→ «Настройки страницы → Дополнительный код → В конец <body>».
Если нужно, чтобы код работал на всём сайте:
→ «Настройки сайта → Дополнительный код → В конец <body>».

<style>
/* Smooth header animation */
/* 👇🏻 Тут замените #rec000000000 на recID вашего блока */
#rec000000000 .t396__artboard {
  transition: transform .6s ease-in-out; /* smooth slide */
  will-change: transform;                /* GPU hint */
}
</style>

<script>
document.addEventListener('DOMContentLoaded',()=> {
  /* 👇🏻 Тут замените #rec000000000 на recID вашего блока */
  const h = document.querySelector('#rec000000000 .t396__artboard');
  if (!h) return;

  h.style.transform = 'translateY(0)'; // visible on load
  let last = pageYOffset;              
  const MIN = 50, DELTA = 8, TRIGGER = 600; // TRIGGER = 600px

  addEventListener('scroll', () => {
    const y = pageYOffset, d = y - last;
    if (y < TRIGGER) {                  // before 600px → always show
      h.style.transform = 'translateY(0)';
      last = y;
      return;
    }
    if (Math.abs(d) < DELTA) return;

    if (d > 0) {
      // scroll down past 600 → hide
      const H = h.getBoundingClientRect().height;
      h.style.transform = `translateY(-${H}px)`;
    } else {
      // scroll up past 600 → show
      h.style.transform = 'translateY(0)';
    }
    last = y;
  }, { passive: true });
});
</script>