Posicionamento sticky combina aspectos dos posicionamentos relativo e fixo. Quando um elemento está com posicionamento sticky, ele se comporta como um elemento relativamente posicionado até atingir um determinado limite na página. Nesse ponto, ele passa a agir como um elemento fixo.

position: sticky;

Considere a seguinte ilustração. O elemento com o conteúdo de texto I am sticky utiliza o posicionamento sticky.

Quando um elemento está dentro de um contêiner, e o contêiner permanece dentro da área visível da tela, o elemento se comporta como se estivesse relativamente posicionado. No entanto, quando uma parte do contêiner pai sai da área visível, o elemento torna-se fixo enquanto alguma parte do contêiner ainda estiver visível. Assim que todo o contêiner sair da área visível, o posicionamento relativo é reativado e o elemento desaparecerá junto com o contêiner.

Vamos praticar criando algumas seções com títulos sticky. Assim, o usuário poderá sempre visualizar o título da seção que está lendo no momento, e depois ele deverá desaparecer ao rolar a página.

Nota

É importante mencionar que devemos especificar a propriedade top ou bottom, para que o navegador entenda onde esperamos que o elemento fique fixo.