#205: Posicionamiento adhesivo: cómo funciona, qué puede romperlo y trucos tontos

Cómo funciona

Se aplica position: sticky;a un elemento junto con un top, left, righto bottomumbral y se “pegará” en esa posición cuando se pase el umbral, siempre que haya espacio para moverse dentro del contenedor principal.

¿Qué puede romperlo?

• Olvidaste presentar la solicitud position: sticky;.
• Olvidó aplicar un umbral de posición como top, left, bottomoright .
• Estás buscando en un navegador Safari antiguo y no lo usaste -webkit-stickycomo valor.
• El umbral que aplicó no se aplica en esa dirección de desplazamiento.
• No hay espacio para moverse en el contenedor principal.
• Un elemento principal se ha ocultado overflow(incluso en una dirección que no importa para el desplazamiento).

trucos raros

El pie de página deslizable

pegajoso Chris Coyier

Una tabla con un encabezado fijo y una primera columna fija

pegajoso Chris Coyier

Al usar transformaciones como scale()y rotate(), el comportamiento de position: sticky;puede volverse bastante extraño, como este comportamiento de “deslizarse”: