https://cocunat.com/js/megamenu/megamenu-header-scroll.js

1// public/js/megamenu/megamenu-header-scroll.js
2//
3// Sticky behavior del header del megamenú. Al hacer scroll y pasar el
4// hero, añade body.body--past-hero para que las variantes Tailwind
5// ([.body--past-hero_&]:...) apliquen fondo sólido al header (sin la
6// cápsula translúcida que vive sobre el hero).
7//
8// Portado de entrega-marcos/public/scripts/cat-header-scroll.js con una
9// diferencia: el hero se busca por [data-megamenu-hero] (con fallback a
10// .cat-hero). Si la página NO tiene hero, el header pasa a modo sólido
11// permanente — así el componente funciona en páginas normales sin
12// necesidad de un hero detrás.
13//
14// Usa rAF en lugar de IntersectionObserver porque si hay una smooth
15// scroll lib en juego, IO puede mis-trigger con eventos sintéticos.
16(function () {
17  function init() {
18    var hero = document.querySelector('[data-megamenu-hero]') || document.querySelector('.cat-hero');
19
20    var ticking = false;
21
22    function update() {
23      // Ignorar mientras el drawer O un mega panel están abiertos: ambos
24      // lockean el body con `position: fixed` + top:-scrollY, y
25      // window.scrollY se vuelve 0. Si dejáramos correr el toggle,
26      // quitaríamos past-hero: el wrapper saltaría a su padding mobile
27      // (drawer) o la barra sólida volvería a cápsula glass sobre el panel
28      // abierto, y ese reflow emite un mouseleave sintético en touch que
29      // auto-cierra el panel.
30      if (
31        document.body.classList.contains('body--drawer-open') ||
32        document.body.classList.contains('body--mega-open')
33      ) {
34        ticking = false;
35        return;
36      }
37      // CON hero ([data-megamenu-hero]): glass hasta pasar su borde inferior,
38      // como en el mockup. SIN hero: la cápsula glass se mantiene arriba del
39      // todo y pasa a blanco sólido en cuanto hay scroll (equivalente a
40      // "pasar el hero" cuando no existe — el contenido quedaría debajo).
41      var threshold = hero ? hero.offsetTop + hero.offsetHeight : 1;
42      document.body.classList.toggle('body--past-hero', window.scrollY >= threshold);
43      ticking = false;
44    }
45
46    function onScroll() {
47      if (!ticking) {
48        requestAnimationFrame(update);
49        ticking = true;
50      }
51    }
52
53    window.addEventListener('scroll', onScroll, { passive: true });
54    // Estado inicial por si se carga con scroll != 0 (reload mid-page)
55    update();
56  }
57
58  if (document.readyState === 'loading') {
59    document.addEventListener('DOMContentLoaded', init);
60  } else {
61    init();
62  }
63})();