Cabeçalho que gruda no topo com position sticky em CSS
2a atrás
undefined
Para criar o efeito acima, utilizaremos #CSS puro. Primeiramente, adicione no seu HTML um título com a classe sticky.
<h1 class="sticky">Título 1</h1>
Agora vamos adicionar o CSS:
.sticky {
background-color: #FFFFFF;
position: sticky;
top: 0;
}
A mágica é feita quando adicionamos o position: sticky e o top: 0, isso informa ao navegador que o elemento deve grudar ao topo. Adicionamos também um background branco nos cabeçalhos para melhorar o efeito.
O código completo é o seguinte:
<!DOCTYPE html>
<html>
<head>
<style>
.sticky {
background-color: #FFFFFF;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<h1 class="sticky">Título 1</h1>
<p>Lorem ipsum dolor sit amet...</p><!--Adicione um texto grande aqui para ver melhor o efeito-->
<h1 class="sticky">Título 2</h1>
<p>Lorem ipsum dolor sit amet...</p><!--Adicione um texto grande aqui para ver melhor o efeito-->
<h1 class="sticky">Título 3</h1>
<p>Lorem ipsum dolor sit amet...</p><!--Adicione um texto grande aqui para ver melhor o efeito-->
</body>
</html>
Comentários (0)