Como fazer - Elemento pegajoso
Aprenda como criar um elemento pegajoso com CSS.
Observação: este exemplo não funciona no Internet Explorer ou Edge 15 e em versões anteriores.
Elemento pegajoso
Exemplo
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Um elemento com position: sticky;
é posicionado com base na posição de rolagem do usuário.
Um elemento adesivo alterna entre relative
e fixed
, dependendo da posição de rolagem. Ele é posicionado em relação até que uma determinada posição de deslocamento seja encontrada na viewport - então ele "gruda" no lugar (como position:fixed).
Nota: Internet Explorer, Edge 15 e versões anteriores não suportam posicionamento fixo. O Safari requer um prefixo -webkit- (veja o exemplo abaixo). Você também deve especificar pelo menos um de , top
ou para que o posicionamento fixo funcione.right
bottom
left
Para saber mais sobre posicionamento CSS, leia nosso tutorial Posição CSS .