15.02.2025

Lidando com Evento Sticky em CSS: Soluções em JavaScript e jQuery

Resposta Rápida

Para monitorar a ativação de position: sticky, utilize a Intersection Observer API. Crie um elemento adicional antes do elemento sticky—um chamado sentinela—e monitore sua visibilidade. Quando a sentinela sair de vista, o elemento entrará no modo sticky.

const sentinel = document.createElement('div');
stickyElement.before(sentinel);

new IntersectionObserver(([entry]) => {
  if (!entry.isIntersecting) {
    console.log('Elemento sticky ativado!');
  }
}, { rootMargin: '-1px 0px 0px 0px', threshold: [1] }).observe(sentinel);

Os valores de rootMargin e threshold devem alinhar-se com os critérios de visibilidade do elemento.

Melhorando o Desempenho

É fundamental que a interface do usuário não tenha atrasos durante o rolamento da página. Para alcançar isso, implemente um mecanismo de debounce para lidar com os eventos de rolagem.

Para uma reação eficaz aos eventos de rolagem, utilize utilitários especializados para throttling ou a função throttle da biblioteca lodash.

Encontrando um Pai Rolável

Às vezes, a propriedade sticky não funciona devido aos valores de overflow no elemento pai. Para resolver o problema, encontre o primeiro pai com uma propriedade de rolagem definida:

function getFirstScrollableParent(node) {
  let parent = node.parentElement;
  while (parent) {
    if ((/auto|scroll/).test(getComputedStyle(parent)['overflow-y'])) {
      return parent;
    }
    parent = parent.parentElement;
  }
  return window;
}

Respondendo a Mudanças na Interface

Adicione e remova classes CSS de elementos conforme eles ficam sticky para tornar a interface mais clara:

observer.observe(sentinel);
function observer(entries) {
  entries.forEach(entry => {
    stickyElement.classList.toggle('is-stuck', !entry.isIntersecting);
  });
}

Certifique-se de definir com estilo a classe .is-stuck no arquivo styles.css!

Visualização

Veja como a aparência da página muda durante a rolagem para baixo:

Começo da página: 😎➖➖➖➖➖➖➖➖
Rolando:          ➖😎➖➖➖➖➖➖
Entrando na zona sticky: ➖➖😎➖➖ 🧲(elemento sticky)
Ativação do sticky: ➖➖🔒(elemento sticky)😎

Vamos adicionar um handler para o evento scroll:

window.addEventListener('scroll', function() {
  if (carHitsStickyZone()) {
    console.log('Elemento em modo sticky!');
  }
});

Neste ponto, o elemento ativa seu modo sticky e continua a seguir o usuário conforme a área visível da página muda.

Mudança de posição: 
Antes de rolar: ➖😎
Depois da ativação: 🔒😎

Durante o evento de rolagem, o elemento transita de sua posição normal para uma posição 'sticky'.

Verificando a Compatibilidade do Navegador

Muitos navegadores ainda não suportam position: sticky. Verifique a compatibilidade do navegador para esse tipo de posicionamento para garantir que funcione corretamente:

if (CSS.supports('position', 'sticky')) {
  // Mostre suas habilidades aqui!
}

Isso protege seu código de erros de execução em navegadores que não suportam esse recurso.

Considerando o Uso de Ferramentas de Terceiros

Apesar da atratividade de usar as capacidades internas do CSS, bibliotecas como ScrollToFixed podem ser benéficas para implementar elementos sticky. No entanto, tenha em mente que polyfills pesados podem reduzir o desempenho da sua aplicação.

Além disso, preste atenção aos problemas de CORS ao usar polyfills para position: sticky para evitar erros de acesso devido a origens de recursos.

Dicas de Profissionais

Para aprofundar sua compreensão sobre position: sticky, considere as percepções de líderes da indústria, como Paul Irish.

Recursos Úteis

1. position - CSS: Folhas de Estilo em Cascata | MDN — Recurso do MDN discutindo a propriedade CSS position, incluindo sticky.
2. position | CSS-Tricks — Um guia necessário sobre posicionamento em CSS do CSS-Tricks.
3. CSS Position Sticky - Como realmente funciona! | por Elad Shechter | Medium — Uma análise aprofundada de position: sticky e suas nuances.
4. Módulo de Layout Posicionado CSS Nível 3 — Descrições detalhadas dos padrões W3C para posicionamento de elementos em CSS.
5. Can I use... — Um guia de compatibilidade entre navegadores com position: sticky.

Video

Navigation