Há quatro anos, Eric Bidelman criou uma postagem incrível no blog 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 de desenvolvedores
da Web, removemos position:sticky
do Chrome porque "a
implementação atual não foi projetada de uma forma que se integre bem ao
sistema de rolagem e composição existente".
Sempre quisemos colocá-lo de volta no Chrome, conforme o bug afirmava: "Depois de
ter a rolagem e composição da casa em ordem, devemos retornar a position:
sticky
e implementar o recurso de uma forma que se integre bem ao restante
do mecanismo". O metabug que rastreia a implementação funciona desde 2013.
A boa notícia é que, a partir do Chrome 56 (atualmente em versão Beta desde dezembro de 2016,
estável em 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 tão feliz com isso?
O position:sticky
é um atributo de posicionamento CSS que permite corrigir um
elemento na janela de visualização (ou seja, fixá-lo na parte de cima da tela),
mas somente quando o pai estiver visível na janela de visualização e ele estiver dentro do
valor limite. Quando ele não estiver fixo na janela de visualização, o elemento agirá como
se fosse position: relative
. Essa é 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 janela de visualização.
É assim que aparece no meu blog. Isso me permite manter o cabeçalho da seção atual no topo da tela enquanto você lê meus artigos bastante longos e trabalhosos :\
Para implementar esse recurso, especifique que o atributo position
precisa ter o valor de sticky
no elemento que você quer que fique preso.
Além disso, também é possível adicionar o deslocamento onde ele precisa ficar preso.
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
O exemplo anterior corrigirá o elemento <h3>
a 10 px da parte superior da
janela de visualização. Para corrigi-lo diretamente na parte de cima da janela de visualização, defina
o atributo top
como top: 0px
.
A compatibilidade com esse recurso é bem forte. Ele está disponível no Chrome,
no Firefox e no Safari. Confira mais detalhes sobre position:sticky
:
- Especificação
- MDN (link em inglês)