Cómo crear: encabezado fijo durante el desplazamiento

Aprende cómo crear un encabezado fijo / adhesivo durante el desplazamiento utilizando CSS y JavaScript。

Prueba personalmente

Crear un encabezado fijo durante el desplazamiento

Primer paso - Agregar HTML：

<div class="header" id="myHeader">
  <h2>My Header</h2>
</div>

Segundo paso - Agregar CSS：

Establecer el estilo de la cabecera; agregar position: sticky y top: 0 para que la cabecera se mantenga fija cuando se desplace al principio. 
.header {
  position: sticky;
  top: 0;
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

Prueba personalmente

establecer el elemento a position: sticky; Después de eso, su posición se determinará según la posición de desplazamiento del usuario。

Los elementos adhesivos alternarán entre posición relativa y fija según la posición de desplazamiento. Mantendrá la posición relativa hasta que alcance la posición de desplazamiento dada en la vista; después de alcanzarla, se 'pegará' en esa posición (como position: fixed de la misma manera）。

Atención:Para que la posición adhesiva funcione, debes especificar al menos arriba、derecha、abajo o izquierda 中的一个。

Páginas relacionadas

Tutoriales:CSS position