/** * mod_anuariocoop_menu :: comportamento sticky do submenu (layout AnuárioCoop). * * O visual vem do shell do componente (com_anuariocoop.anuario-shell). Aqui tratamos * apenas a fixação ao rolar: dentro do wrapper curto de um módulo Helix o * `position: sticky` do shell não tem curso para grudar, então o neutralizamos e * usamos `position: fixed` alternado por JS (classe .is-stuck) — a barra fica no fluxo * normal no topo da página e "aparece" grudada no topo ao rolar para baixo. * * @copyright (C) 2026 OCB / SESCOOP * @license GNU General Public License version 3 or later; see LICENSE.txt */ /* Não-fixo: `relative` (em vez de `static`) neutraliza o sticky do shell E cria um contexto de empilhamento, para o dropdown "Ramos" ficar acima do conteúdo. */ .ac-menu-sticky.ac-shell-submenu { position: relative !important; z-index: 300; } .ac-menu-sticky.ac-shell-submenu.is-stuck { position: fixed !important; /* O JS posiciona o "top" logo abaixo do cabeçalho do site (segue-o ao rolar); 0 é só fallback caso o script não rode. */ top: 0; left: 0; right: 0; /* Acima do conteúdo e do botão "voltar ao topo" (1000); abaixo dos overlays do site (mensagens/acessibilidade 9999, offcanvas 10000/99999). Ao grudar, o JS move a barra para o , escapando de contextos de empilhamento do Helix (wrappers com transform) que deixavam itens da página por cima dela. */ z-index: 9990; animation: acMenuRevealDown .28s cubic-bezier(.2, .8, .2, 1); /* Fundo sólido, sem backdrop-filter, quando fixo: o blur do shell num elemento `fixed`, somado ao smooth-scroll da página, faz o conteúdo "fantasmar" por cima da barra durante a rolagem (glitch de backdrop-filter). Sólido elimina isso; o efeito fosco continua no topo da página, quando a barra está no fluxo. */ background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } @keyframes acMenuRevealDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* Espaçador injetado pelo JS: reserva a altura da barra quando ela vira fixed, evitando o "salto" do conteúdo. */ .ac-menu-sticky-spacer { display: block; } .ac-menu-sticky-sentinel { pointer-events: none; } @media (prefers-reduced-motion: reduce) { .ac-menu-sticky.ac-shell-submenu.is-stuck { animation: none; } }