Há quatro anos, Eric Bidelman criou uma postagem de blog bastante legal sobre o fato de que
position: sticky chegou ao WebKit,
que na época era o mecanismo que alimentava o Chrome (assim como muitos outros
navegadores, incluindo o Safari). Um ano depois, e para a consternação dos desenvolvedores
da Web, removemos position:sticky do Chrome porque "a
implementação atual não foi projetada de uma maneira que se integra bem ao
sistema de rolagem e composição existente".
Sempre quisemos que ele voltasse ao Chrome, como o bug indicava: "Depois de
colocar a rolagem e a composição em ordem, devemos retornar a position:
sticky e implementar o recurso de uma maneira que se integre bem ao restante
do mecanismo". O metabug que rastreia a
implementação está em desenvolvimento desde 2013.
A boa notícia é que, a partir do Chrome 56 (atualmente Beta desde dezembro de 2016,
estável desde janeiro de 2017), o position: sticky está de volta ao Chrome.
O que é position:sticky?
Demorou um pouco para chegar aqui, então por que estou animado com isso?
position:sticky é um atributo de posicionamento do CSS que permite fixar um
elemento na janela de visualização (ou seja, fixá-lo na parte de cima da tela)
somente quando o elemento pai está visível na janela de visualização e está dentro do
valor de limite. Quando não está fixado à viewport, o elemento age como
se fosse position: relative. É uma adição muito boa e simples à
plataforma que elimina a necessidade de usar JavaScript em um manipulador de eventos onscroll
apenas para bloquear um elemento na parte de cima da viewport.
Confira como fica no meu blog. Isso me permite manter o cabeçalho da seção atual na parte de cima da tela enquanto você lê meus artigos longos e trabalhosos:
Para implementar esse recurso, especifique que o atributo position
precisa ter o valor de sticky no elemento que você quer fixar.
Além disso, você também pode adicionar o deslocamento onde ele precisa ser fixado.
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
O exemplo anterior fixa o elemento <h3> a 10 px da parte de cima do
viewport. Para fixar diretamente na parte de cima da viewport, defina
o atributo top como top: 0px.
O suporte a esse recurso é bastante forte. Ele está disponível no Chrome (ufa),
Firefox e Safari. Confira mais detalhes sobre position:sticky: