JS Module

Scroll Spy Y2ScrollS

Destaca automaticamente o link ativo no menu conforme o scroll — suporta window, containers internos, click com smooth scroll e evento de mudança.

2. Estilos Visuais do Menu

O Y2ScrollS apenas adiciona .is-act — o visual é 100% CSS. Três estilos prontos para copiar:

Pill (highlight)

Borda lateral

Dot indicator

Alpha

Seção Alpha — role para ver os três menus mudando ao mesmo tempo.

Beta

Seção Beta — três navs diferentes monitorando o mesmo container.

Gamma

Seção Gamma — estilos independentes, mesmo scroll.

/* Estilo 1: Pill highlight */
[y2scrolls] a.is-act {
  color: var(--y2-pri);
  font-weight: 700;
  background: color-mix(in oklch, var(--y2-pri) 10%, transparent);
}

/* Estilo 2: Borda lateral */
[y2scrolls] a {
  border-left: 3px solid transparent;
  padding-left: 1rem;
  transition: color .2s, border .2s;
}
[y2scrolls] a.is-act {
  color: var(--y2-pri);
  font-weight: 700;
  border-left-color: var(--y2-pri);
}

/* Estilo 3: Dot indicator */
[y2scrolls] a::before {
  content: '';
  width: .6rem; height: .6rem;
  border-radius: 50%;
  background: var(--y2-bor);
  transition: background .2s, transform .2s;
}
[y2scrolls] a.is-act::before {
  background: var(--y2-pri);
  transform: scale(1.4);
}

4. Stepper + Barra de Progresso via Evento

Use o evento y2:scrolls:change para criar qualquer efeito extra — aqui um stepper numerado e uma barra de progresso.

Briefing

Levantamento de requisitos, escopo e objetivos do projeto.

Design

Wireframes, protótipos e aprovação do visual com o cliente.

Desenvolvimento

Implementação com Y2 Framework — sem npm, sem bloat.

Testes

QA, responsividade e performance antes do go-live.

Deploy

Publicação, monitoramento e entrega ao cliente. 🎉

const nav = document.querySelector('#meu-spy-nav');
const bar = document.querySelector('#prog-bar');
const total = nav.querySelectorAll('a').length;

nav.addEventListener('y2:scrolls:change', e => {
  // e.detail.link = link ativo, e.detail.id = id da seção
  const links  = [...nav.querySelectorAll('a')];
  const idx    = links.indexOf(e.detail.link);
  const pct    = Math.round(((idx + 1) / total) * 100);
  bar.style.width = pct + '%';
});

5. Spy na Window (página inteira)

Sem y2scrolls-tgt, o spy monitora o scroll da janela inteira. Ideal para menus fixos em landing pages e artigos longos.

Dica de offset: Use y2scrolls-offset igual à altura do seu header fixo (ex: 80px) para que a seção ative exatamente quando aparecer abaixo do menu.

6. Configuração

7. Evento JavaScript

const nav = document.querySelector('[y2scrolls]');

nav.addEventListener('y2:scrolls:change', e => {
  const { id, link } = e.detail;

  // id    = string com o id da seção ativa (ex: "secao2")
  // link  = elemento  que recebeu .is-act

  console.log('Seção ativa:', id);
  console.log('Link ativo:', link);

  // Exemplos de uso:
  document.title = link.textContent + ' - Docs Y2';   // Atualiza título
  document.querySelector('.breadcrumb').textContent = link.textContent;
});

Quick Reference

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