position:sticky está de volta no Chrome

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: