Como criar: cabeçalho fixo ao rolar

Aprenda a usar CSS e JavaScript para criar um cabeçalho fixo/adesivo ao rolar.

Experimente pessoalmente

Crie um cabeçalho fixo ao rolar

Primeiro passo - Adicione HTML:

<div class="header" id="myHeader">
  <h2>Meu Cabeçalho</h2>
</div>

Segundo passo - Adicione CSS:

Defina o estilo da cabeçalho; adicione position: sticky e top: 0 para manter a cabeçalho fixa quando rolar para o topo. 
.header {
  position: sticky;
  top: 0;
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

Experimente pessoalmente

O elemento é configurado para position: sticky; Depois disso, sua posição será determinada com base na posição de rolagem do usuário.

Os elementos adesivos alternam entre alinhamento relativo e fixo com base na posição de rolagem. Antes de alcançar a posição de deslocamento fornecida na vista, ele mantém o alinhamento relativo; após alcançar, ele se position: fixed de forma semelhante).

Atenção:Para ativar a localização adesiva, você deve pelo menos especificar top、right、bottom ou left 中的一个。

Páginas relacionadas

Tutorial:position CSS