JS Module

Scroll Spy Y2ScrollS

Marca automaticamente o link ativo no menu conforme o usuário rola a página - suporta window e containers scrolláveis.

1. Demo - Role o conteúdo à direita

Introdução

Conteúdo da seção de introdução. Role para baixo para ver o menu destacar o link correto.

Fundamentos

Conteúdo dos fundamentos. O link "Fundamentos" no menu deve estar ativo agora.

Componentes

Lista de componentes disponíveis no framework Y2.

Avançado

Tópicos avançados como customização, temas e plugins.

Exemplos

Exemplos práticos e casos de uso reais com o Y2 Framework.

2. Configuração

3. Como Funciona

Y2ScrollS usa requestAnimationFrame no evento de scroll para detectar qual seção está visível. Quando uma seção passa o offset do topo, o link correspondente recebe a classe .is-act.

// Y2ScrollS procura links com href="#id" dentro do nav
// Quando a seção #id ultrapassa o offset, o link recebe .is-act

// Evento disparado ao mudar seção ativa
nav.addEventListener('yd:scrolls:change', e => {
  console.log('Seção ativa:', e.detail.id);
  console.log('Link ativo:', e.detail.link);
});

4. Estilizar Link Ativo

/* Link ativo pelo scroll spy */
[y2scrolls] a.is-act {
  color: var(--y2-pri);
  font-weight: 700;
  border-left: 3px solid var(--y2-pri);
  padding-left: 1rem;
}

/* Transição suave */
[y2scrolls] a {
  transition: color .2s, border .2s, padding .2s;
}

Quick Reference

Atributo / Classe Elemento Descrição
y2scrolls nav Ativa o scroll spy no elemento
y2scrolls-offset nav Offset em px do topo para ativar seção (padrão: 80)
y2scrolls-tgt nav Seletor do container scrollável (padrão: window)
.is-act a Classe adicionada ao link da seção ativa
yd:scrolls:change evento Disparado ao mudar seção - detail: { id, link }