ScrollSpy [sw-scrollspy]
Destaca o link do menu conforme a seção visível e faz scroll suave até ela ao clicar. Funciona na página inteira ou dentro de um container com sw-scrollspy-tgt.
1. Demo (rolagem dentro de um container)
Seção A
Conteúdo A.
Seção B
Conteúdo B.
Seção C
Conteúdo C.
2. Três estilos de menu, mesmo conteúdo
O componente só alterna a classe .is-act — o visual é 100% seu. Os três menus abaixo observam o mesmo container ao mesmo tempo.
Primeira
Conteúdo da primeira seção.
Segunda
Conteúdo da segunda seção.
Terceira
Conteúdo da terceira seção.
3. Navbar horizontal
O mesmo componente funciona com o menu na horizontal, acima do conteúdo — padrão comum em landing pages.
Produto
Visão geral do produto.
Funcionalidades
O que o produto faz.
Preços
Planos e valores.
FAQ
Perguntas frequentes.
Contato
Fale com a gente.
4. Stepper + barra de progresso sw:scrollspy:change
Escutando o evento, dá pra dirigir qualquer indicador externo — aqui uma barra de progresso e um stepper numerado que não são links de menu nenhum.
Briefing
Alinhamento inicial com o cliente.
Design
Wireframes e identidade visual.
Desenvolvimento
Implementação do projeto.
Testes
QA e ajustes finais.
Deploy
Publicação em produção.
5. Página inteira (sem sw-scrollspy-tgt)
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.
6. Smooth Scroll isolado
Referência
| Atributo | Padrão | Descrição |
|---|---|---|
sw-scrollspy-offset | 80 | Distância do topo considerada "seção ativa". |
sw-scrollspy-tgt | window | Seletor do container rolável (opcional). |
sw-scroll / sw-scroll-offset | — | Link/botão avulso com scroll suave até href ou sw-scroll-target. |
sw:scrollspy:change | — | Evento — detail.id, detail.link. |
SW.Scroll.to(sel, offset) | — | API programática. |