Actualmente solo Firefox y Safari soportan la propiedad position:sticky o posición pegajosa, que hace que los elementos se muevan de manera normal con el scroll, pero al llegar a la posición que le indiquemos, éstos se mantengan fijos a pesar de continuar haciendo scroll. Stickyfill.js agrega soporte para los demás navegadores, emulando el mismo comportamiento mediante javascript.

Este tipo de posicionamiento es común verlo en la navegación o algún elemento que coloquemos en el sidebar que queramos que se mantenga a la vista una vez que aparezca en la pantalla.

Modo de uso

1. Descarga la librería de cualquiera de los siguientes enlaces:

stickyfill.js

stickyfill.min.js

2. Incluye el archivo en tu documento .html, de preferencia justo antes del cierre del body.

3. Agrega todos los elementos que contendrán el estilo de posición sticky (pegajosa) a un arreglo que usa la librería para observar la posición de cada uno de sus elementos y simular el comportamiento.

4. Por último se asigna la propiedad position:sticky a los elementos agregados, que en éste caso, son todos los que contengan la clase sticky (por cierto, el nombre de la clase no importa, puede ser cualquiera).

La librería se desactiva de manera automática para los navegadores que si tienen soporte para esta propiedad css, de esa forma usan su comportamiento nativo, por lo que si omites colocar la propiedad en css, en Firefox y Safari no funcionará.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *