Posicionamiento pegajoso con nada más que CSS

Los elementos adheridos, cuando el usuario se desplaza a un cierto punto, se ha convertido en un patrón común en el diseño web moderno. Verá que se aplica a la navegación superior, a la barra lateral, a enlaces compartidos, o tal vez a anuncios; Mantener la visibilidad dentro de la ventana gráfica mientras el usuario se desplaza.. 

Históricamente hemos necesitado JavaScript para hacer esto. Sin embargo, el comportamiento pegajoso ha sido propuesto (y redactado) como una nueva norma (la pegajoso Posición), lo que nos permite lograr el efecto con CSS puro. Echemos un vistazo a cómo funciona.!

Posición pegajosa

pegajoso es un nuevo valor para el posición propiedad, agregada como parte de las especificaciones del módulo de diseño CSS3. Actúa de manera similar a relativo Posicionamiento, en el sentido de que no elimina nada del flujo de documentos. En otras palabras, un elemento adhesivo no tiene efecto en la posición de los elementos adyacentes y no colapsa su elemento principal.

Dado el siguiente ejemplo, establecemos la #sidebar posición para pegajoso junto con superior: 10px. El valor superior es obligatorio y especifica la distancia desde el borde superior de la vista donde el elemento palo. 

#sidebar position: -webkit-sticky; // requerido para la posición de Safari: pegajoso; arriba: 0; // requerido también.  

Ahora, a medida que nos desplazamos por la página, cuando la distancia de la barra lateral desde la parte superior de la ventana gráfica alcanza 0, la barra lateral debe pegarse, efectivamente dándonos un fijo posición. En otras palabras, la pegajoso es una especie de híbrido entre relativo y fijoposición.

Anidamiento

Además, el pegajoso posición trabajará dentro de un cuadro de desplazamiento o un elemento desbordante. Esta vez vamos a configurar el parte superior a 15px para dar un poco más de espacio encima de la barra lateral cuando es pegajosamente posicionado (si, eso es una palabra).

La barra lateral permanecerá pegajosa a lo largo de la altura del padre (es decir, cuando la parte inferior del padre alcance la parte inferior de la barra lateral, la "empujará" de la página una vez más).

Fácil no lo es?

Apoyo

Si está viendo estas demostraciones en Chrome, Opera o Internet Explorer (y Blink), ya se habrá dado cuenta de que no funcionan. Estos navegadores aún no soportan el pegajoso valor.

Soporte de navegador de posición Sticky CSS

En Chrome 28, cuando cambió a Blink engine, Chrome decidió eliminar el pegajoso posición desde su base de código, e incluso eliminó la opción de habilitarla a través del cromo: // banderas página. La razón es:

“La implementación actual de la posición fija en Blink no se integra correctamente con la composición o el desplazamiento. Eventualmente queremos implementar la posición fija, pero la implementación actual es conseguir la forma de trabajo para mejorar el desplazamiento y la composición. Una vez que el desplazamiento y la composición están en mejor forma, podemos volver a introducir la posición de forma pegajosa de manera que se integre correctamente con el resto del sistema.

Una vez alternativa es aplicar una relleno de polietileno Para simular el efecto en navegadores no compatibles..

Usando el Polyfill

Para ayudar a nuestros navegadores no compatibles, utilizaremos stickyfill desarrollado por Oleg Korsunsky. El polyfill funciona muy bien en diversas circunstancias. Si el elemento designado tiene relleno, márgenes, bordes, ha sido flotado o formado con unidades relativas como em y porcentaje, el polyfill imitará con precisión el CSS pegajoso comportamiento de posición. Y el uso de stickyfill es igualmente intuitivo..

Para comenzar, tome stickyfill.js (opcionalmente con jQuery, si está más familiarizado y prefiere usar jQuery para seleccionar elementos). Enlace estas bibliotecas dentro de su documento HTML. Luego inicie stickyfill con el elemento designado, de la siguiente manera:

var sidebar = document.getElementById ('sidebar'); Stickyfill.add (barra lateral); 

Si está utilizando jQuery, podría escribir lo siguiente:

$ ('# sidebar'). Stickyfill (); 

Ahora, nuestra barra lateral pegajosa debería funcionar en todos los navegadores, incluidos Chrome y Opera. El polyfill es lo suficientemente inteligente como para que solo se ejecute en navegadores no compatibles, de lo contrario, se deshabilitará completamente, dejando de lado la implementación nativa del navegador..

Advertencias

Hay un par de otras cosas a tener en cuenta antes de dar el paso y usar pegajoso posición en sus sitios web:

• Primero, la altura del contenedor principal debe ser mayor que el elemento adhesivo.
• Si bien Safari admite de forma nativa la posición adhesiva de CSS (aunque tiene un prefijo), no tendrá efecto cuando la posición de adherencia se use bajo un elemento con CSS pantalla: tabla;. Esto es un error.
• El polyfill tiene sus propios defectos, ya que no funcionará dentro de una caja desbordada.
• En el momento de escribir este documento, no hay un controlador de eventos de JavaScript que pueda identificar si el elemento es atascado. Tal evento podría ser útil, por ejemplo, para agregar clases adicionales cuando el elemento está pegado (puede que no sea una palabra).

Pensamientos de cierre

La posición adhesiva de CSS podría ser una herramienta brillante si simplemente necesita un elemento adhesivo plano. Sin embargo, si su necesidad va más allá de eso, digamos que desea agregar algunos efectos extravagantes al elemento adhesivo, será mejor que opte por una biblioteca de JavaScript como Waypoints.js con su módulo adhesivo..

No obstante, esperamos ver algunas mejoras importantes en CSS sticky, en lo que respecta a su capacidad, así como el soporte del navegador, muy pronto.

Referencias adicionales

• Por qué (Sticky) JS no es ideal?
• CSS Sticky Working Draft
• Consejo rápido: navegación pegajosa, sin el salto incómodo por Adi Purdila

Aprender CSS: la guía completa

Hemos creado una guía completa para ayudarlo a aprender CSS, ya sea que esté comenzando con lo básico o si desea explorar CSS más avanzados..