Scrollspy Componentes

O que é

Usado em documentação e landing pages com sumário lateral — o item do menu "acende" sozinho conforme você rola pela seção correspondente.

Como funciona

Observa a posição de cada seção-alvo a cada scroll (via requestAnimationFrame, sem sobrecarregar) e ativa o link cuja seção passou do limiar (sw-scrollspy-offset). Clique no link também rola suavemente até lá.

Exemplos

<nav sw-scrollspy sw-scrollspy-tgt="#lista" sw-scrollspy-offset="20">
  <a href="#sec1">Seção 1</a>
  <a href="#sec2">Seção 2</a>
</nav>
<div id="lista">
  <section id="sec1">...</section>
  <section id="sec2">...</section>
</div>

/* O componente só alterna a classe .is-act — o visual é 100% seu. Aqui os três
   menus abaixo observam (sw-scrollspy-tgt) o mesmo container ao mesmo tempo. */
.meu-menu-pill a.is-act { background: color-mix(in srgb, var(--sw-pri) 15%, transparent); color: var(--sw-pri); }
.meu-menu-borda a.is-act { border-left: 3px solid var(--sw-pri); color: var(--sw-pri); }
.meu-menu-ponto a.is-act::before { background: var(--sw-pri); transform: scale(1.3); }

<nav sw-scrollspy sw-scrollspy-tgt="#pagina" class="spy-hnav">
  <a href="#produto">Produto</a>
  <a href="#precos">Preços</a>
</nav>

<!-- Os próprios <a> do sw-scrollspy viram os círculos do stepper — a classe .is-act
     que o componente já aplica é o bastante pro CSS deles. A barra de progresso é o
     único pedaço que precisa de JS de verdade, ouvindo o evento. -->
const nav = document.querySelector('#meu-menu');
const bar = document.querySelector('.progress-bar');
nav.addEventListener('sw:scrollspy:change', (e) => {
  const links = [...nav.querySelectorAll('a')];
  const idx = links.indexOf(e.detail.link);
  bar.style.width = `${((idx + 1) / links.length) * 100}%`;
});

<!-- Sem sw-scrollspy-tgt, o espião observa o scroll da JANELA inteira em vez de um
     container — útil pra um sumário fixo ao lado de um artigo longo. Use
     sw-scrollspy-offset igual à altura do seu cabeçalho fixo, se houver. -->
<nav sw-scrollspy sw-scrollspy-offset="80" class="minha-nav-fixa">
  <a href="#introducao">Introdução</a>
  <a href="#instalacao">Instalação</a>
  <a href="#uso">Uso</a>
</nav>

<article>
  <section id="introducao">...</section>
  <section id="instalacao">...</section>
  <section id="uso">...</section>
</article>

<!-- Só a rolagem suave até uma âncora, sem menu nem estado ativo — esse é o
     componente 12 (Scroll), não este. Use quando quiser só o "ir até lá" sem
     acender item de menu nenhum. -->
<a sw-scroll href="#secao" sw-scroll-offset="80">Ir para a seção →</a>

Atributos

Variantes

Nenhum.

Eventos

API (JavaScript)

Nenhum.

Requisitos

• Os links precisam ser href="#id" apontando pra elementos reais na página/container.

Limitações — o que ele não faz

Nenhuma.