Merida Design Blog

Publicado el | Recursos /

Stickyfill: Polyfill javascript para aplicar posición pegajosa a cualquier elemento

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 biblioteca de cualquiera de los siguientes enlaces:

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

<!Doctype html>
<html>
    <head>...</head>
    <body>
        // Contenido html
        ...
        
        <script src="path/to/stickyfill.js"></script>
    </body>
</html>

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

// Contenido html
...

<script src="path/to/stickyfill.js"></script>
<script>   
    var stickyEls = document.getElementsByClassName('sticky');
    Array.from(stickyEls).forEach(function(item) {
        Stickyfill.add(item);
    });
</script>

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).

.sticky {
    position: -webkit-sticky; // para que funcione en safari
    position: sticky;         // con este funciona en firefox
    top: 0;                   // cuando los elementos lleguen a esta posición se mantendrán ahí
}

La biblioteca 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á.


Demo

Te comparto un ejemplo sencillo en el que puedes ver como funciona ésta biblioteca.

Haz scroll para ver el posicionamiento en los elementos con color azul


Página: https://github.com/wilddeer/stickyfill



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: