Posición de aterrizaje: pegajoso en WebKit

position: sticky es una nueva forma de posicionar elementos y es conceptualmente similar a position: fixed. La diferencia es que un elemento con position: sticky se comporta como position: relative dentro de su elemento superior, hasta que se alcanza un umbral de desplazamiento determinado en el viewport.

Casos de uso

Paráfrasis de la propuesta original de Edward O’Connor de esta función:

Presentamos el posicionamiento fijo

Demostración fija

INICIAR DEMOSTRACIÓN

Con solo agregar position: sticky (con el prefijo del proveedor), podemos indicarle a un elemento que sea position: relative hasta que el usuario desplace el elemento (o su elemento superior) para que esté a 15 px de la parte superior:

.sticky {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    top: 15px;
}

En top: 15px, el elemento se fija.

Para ilustrar esta función en un contexto práctico, creamos una DEMOSTRACIÓN que retiene los títulos de los blogs mientras te desplazas.

Enfoque anterior: eventos de desplazamiento

Hasta ahora, para lograr el efecto persistente, los sitios configuran objetos de escucha de eventos scroll en JS. También usamos esta técnica en los instructivos html5rocks. En pantallas de menos de 1,200 px, la barra lateral del índice cambia a position: fixed después de cierta cantidad de desplazamiento.

A continuación, se muestra la manera (que hoy en día es anterior) de tener un encabezado que se adhiera a la parte superior del viewport cuando el usuario se desplace hacia abajo y vuelva a su lugar cuando el usuario se desplace hacia arriba:

<div class="header"></div>

<script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;

function onScroll(e) {
    window.scrollY >= origOffsetY ? header.classList.add('sticky') :
                                    header.classList.remove('sticky');
}

document.addEventListener('scroll', onScroll);
</script>

Pruébalo: http://output.jsbin.com/omanut/2/

Esto es bastante fácil, pero este modelo se desglosa rápidamente si quieres hacer esto para un montón de nodos del DOM, por ejemplo, cada título <h1> de un blog a medida que el usuario se desplaza.

Por qué JS no es ideal

En general, los controladores de desplazamiento nunca son una buena idea. Los usuarios suelen trabajar demasiado y se preguntan por qué se bloquea su IU.

Otro aspecto que se debe considerar es que cada vez más navegadores están implementando el desplazamiento acelerado por hardware para mejorar el rendimiento. El problema con esto es que en los controladores de desplazamiento de JS están en funcionamiento, los navegadores pueden volver a un modo más lento (de software). Ahora ya no se está ejecutando en la GPU. En cambio, estamos de vuelta en la CPU. ¿El resultado? El usuario percibe más bloqueos cuando se desplaza por la página.

Por lo tanto, tiene mucho sentido que esta función sea declarativa en CSS.

Asistencia

Lamentablemente, no existe una especificación para este caso. Se propuso en www-style en junio y al finalizó en WebKit. Eso significa que no hay buena documentación a la cual apuntar. Sin embargo, debes tener en cuenta, de acuerdo con este error, si se especifican left y right, left ganará. Del mismo modo, si se usan top y bottom al mismo tiempo, gana top.

Actualmente, se admite Chrome 23.0.1247.0+ (versión actual de Canary) y WebKit todas las noches.