¿Cómo crear: elementos sticky

Aprenda a usar CSS para crear elementos sticky.

Pruebe usted mismo

Atención:Este ejemplo no es aplicable a Internet Explorer o Edge 15 y versiones anteriores.

Elementos sticky

Ejemplo

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Pruebe usted mismo

Los elementos con position: sticky; se ubican según la posición de desplazamiento del usuario.

Los elementos sticky se alternan entre ubicación relativa y fija, dependiendo de la posición de desplazamiento. Antes de alcanzar la posición de desplazamiento dada en la vista, se ubicará de manera relativa, luego se 'pegará' en su lugar (como position:fixed).

Atención:Internet Explorer, Edge 15 y versiones anteriores no admiten la ubicación sticky. Safari requiere el prefijo -webkit- (ver los ejemplos a continuación). Para que la ubicación sticky funcione, debe especificar al menos uno de top, right, bottom o left.

Páginas relacionadas

Tutoriales:CSS定位