Fixed (gruda no topo) Animações

O que é

É para quando você quer que algo "acompanhe" a leitura: o título de uma seção longa, uma coluna de resumo ao lado do texto, a barra de filtros de uma lista. Você coloca sw-ani="fixed" no elemento e ele gruda no topo da tela enquanto o bloco em que ele está (o pai) ainda está passando. Quando o bloco termina, ele sai junto. A página continua rolando normalmente — diferente do Pin, que para a página.

Por baixo é o position: sticky do próprio navegador: leve, sem cálculo pesado. Ele gruda no topo da janela e respeita o tamanho do pai. Faz parte do pacote de animação — se você não usa esse pacote, a classe stk do arquivo principal faz a mesma coisa.

Quando usar

• Título da seção que acompanha enquanto a pessoa lê uma lista longa (cardápio, perguntas frequentes).
• Coluna lateral com resumo, preço ou botão "Comprar" ao lado de um texto comprido.
• Barra de filtros de uma loja que fica à mão enquanto a pessoa desce pelos produtos.
• Se você quer parar a página por um trecho para animar algo, o certo é o Pin.

Comece aqui

1. 1

   Coloque o SW Core e o pacote de animação. O JS da animação vai antes do swcore.min.js.

   <link rel="stylesheet" href="swcore/swcore.min.css">
   <link rel="stylesheet" href="swcore/swcore.motion.min.css">
   
   <!-- fim do <body> -->
   <script src="swcore/swcore.motion.min.js"></script>
   <script src="swcore/swcore.min.js"></script>

2. 2

   Coloque o elemento que vai grudar dentro do bloco que ele acompanha, junto com o conteúdo longo.

   <section>
     <h2 sw-ani="fixed" class="bg-sur p-m">Bolos</h2>
     …lista longa de bolos…
   </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>
  <h3 sw-ani="fixed" class="bg-sur bd p-m r-m">Entregas</h3>
  <p>…</p>
</div>
<div>
  <h3 sw-ani="fixed" class="bg-sur bd p-m r-m">Trocas</h3>
  <p>…</p>
</div>

<!-- cada título acompanha só o seu bloco e vai embora quando o próximo chega -->

<div class="l l-2 gap-6">
  <div>
    <img sw-ani="fixed" src="/produto/tenis.webp" width="800" height="800" alt="Tênis de corrida azul">
  </div>
  <div>
    <h1>Tênis Corrida Leve</h1>
    <p>…descrição longa, medidas, avaliações…</p>
  </div>
</div>

Precisa de quê

• swcore.min.css + swcore.motion.min.css, e swcore.motion.min.js antes do swcore.min.js.
• Sem o pacote de animação, use a classe stk (vem no swcore.min.css).

Cuidados — erros comuns

• "Não gruda": procure um elemento em volta com overflow: hidden, overflow: auto ou overflow: scroll. Isso é regra do navegador para o sticky: ele passa a grudar dentro daquele elemento, não na tela.
• Ele só acompanha enquanto o pai está passando. Se o pai tem a mesma altura que ele, não sobra espaço para grudar.
• Numa grade (l l-2), coloque o fixed dentro de uma <div> da coluna, como no exemplo. Direto como item da grade, ele estica na altura da linha e não tem para onde andar.
• Dê um fundo a ele (bg-sur, bg-g-pri…): transparente, o conteúdo que passa por baixo aparece através.
• Com uma navbar fixa no topo, o elemento fica escondido atrás dela: use a classe stk-nav, que gruda logo abaixo da navbar.

O que ele não faz

• Sempre gruda no topo (0). Para outra distância do topo, use stk-nav ou o seu próprio CSS com top.
• Não anima nada enquanto está grudado. Para animar peças presas à rolagem, use o Pin.