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)