Scrollspy Componentes

O que é

Em página comprida — um texto de blog, uma página de serviços, um manual — é comum ter um "índice" do lado ou no topo. O scrollspy faz esse índice mostrar onde a pessoa está: enquanto ela rola, o link da seção visível fica destacado e uma barrinha desliza até ele. Clicar num link leva até a seção, rolando suave. Você só coloca sw-scrollspy numa <nav> com links href="#id-da-seção".

O JavaScript do núcleo procura, para cada link, a seção com aquele id. A cada rolagem ele vê qual seção já passou do topo (com uma folga de 80 px, ajustável) e coloca a classe is-act no link dela. O marcador que desliza é criado sozinho. Chegando ao fim da página, o último link acende. Por padrão ele acompanha a rolagem da página; com sw-scrollspy-tgt ele acompanha uma caixa com rolagem própria (como nos quadros abaixo — role dentro deles).

Quando usar

• Página de serviços ou landing longa: índice fixo ao lado com Serviços / Preços / Depoimentos / Contato.
• Artigo de blog, manual, termos de uso: sumário que mostra em que parte do texto a pessoa está.
• Menu do topo de um site de uma página só (one page): os links acendem conforme a seção.
• Ficha de produto com abas "Descrição / Medidas / Avaliações" em uma página só: use o horizontal.

Comece aqui

1. 1

   Coloque o SWCore na página: CSS no <head> e JS no fim do <body>. O scrollspy precisa dos dois.

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   
   <!-- fim do <body> -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Faça a <nav sw-scrollspy> com um link para cada seção. O href do link é # + o id da seção. Pronto: ao rolar a página, o link certo acende.

   <nav sw-scrollspy>
     <a href="#servicos">Serviços</a>
     <a href="#precos">Preços</a>
     <a href="#contato">Contato</a>
   </nav>
   
   <section id="servicos">…</section>
   <section id="precos">…</section>
   <section id="contato">…</section>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<div class="l l-4">
  <aside>
    <!-- .stk-nav gruda o índice logo abaixo da navbar enquanto a página rola -->
    <div class="stk-nav">
      <nav sw-scrollspy sw-scrollspy-offset="120">
        <a href="#corte">Corte</a>
        <a href="#barba">Barba</a>
        <a href="#precos">Preços</a>
        <a href="#contato">Contato</a>
      </nav>
    </div>
  </aside>
  <main class="co3-m">
    <section id="corte">…</section>
    <section id="barba">…</section>
    <section id="precos">…</section>
    <section id="contato">…</section>
  </main>
</div>

<nav sw-scrollspy sw-scrollspy-dir="h" sw-scrollspy-offset="40" sw-scrollspy-tgt="#ficha">
  <a href="#descricao">Descrição</a>
  <a href="#medidas">Medidas</a>
  <a href="#avaliacoes">Avaliações</a>
</nav>
<div id="ficha" class="ov-au">   <!-- dê uma altura a esta caixa no seu CSS -->
  <section id="descricao">…</section>
  <section id="medidas">…</section>
  <section id="avaliacoes">…</section>
</div>

<!-- a div .stk gruda a faixa no topo ao rolar; o link da seção visível acende -->
<div class="stk bg-sur">
  <nav sw-scrollspy sw-scrollspy-dir="h" sw-scrollspy-offset="90">
    <a href="#sobre">Sobre</a>
    <a href="#portfolio">Portfólio</a>
    <a href="#depoimentos">Depoimentos</a>
    <a href="#contato">Contato</a>
  </nav>
</div>

<section id="sobre">…</section>
<section id="portfolio">…</section>
<section id="depoimentos">…</section>
<section id="contato">…</section>

const indice = document.querySelector('[sw-scrollspy]');
indice.addEventListener('sw:scrollspy:change', (e) => {
  // e.detail.id   → id da seção atual, ex.: "precos"
  // e.detail.link → o <a> que acendeu
  document.title = 'Barbearia do Zé — ' + e.detail.link.textContent;
});

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css + swcore.min.js.
• Cada link com href="#id" e uma seção na página com aquele id.

Cuidados — erros comuns

• Link com href diferente do id da seção (#Precos × id="precos"): aquele link nunca acende. Maiúscula e minúscula contam.
• Colocar à mão um <span sw-scrollspy-mark>: não precisa, o marcador é criado sozinho (e um feito à mão fica parado, sobrando).
• Usar sw-scrollspy-tgt numa caixa que não tem rolagem própria (sem altura fixa e overflow:auto): nada acende. Se quem rola é a página, não use o atributo.
• Esquecer a folga quando há navbar fixa: o link troca antes/depois da hora. Coloque em sw-scrollspy-offset a altura da navbar (em px) mais um pouco.
• Seções muito curtas no fim da página podem nunca chegar ao topo; por isso, no fim da rolagem, o último link acende sozinho.

O que ele não faz

• Não cria o índice sozinho a partir dos títulos da página: você escreve os links.
• Só um nível de links (não destaca subtítulos dentro de subtítulos).