15 complementos de jQuery para hacer elementos pegajosos inteligentes

Ahora es común ver ciertos elementos en un sitio fijo a una posición cuando se desplaza hacia arriba o hacia abajo por el sitio, por ejemplo. El menú de navegación, el encabezado o la barra lateral. Esto permite que el elemento esté fácilmente disponible independientemente de la posición del usuario.

Llamado elemento adhesivo, esto se puede lograr simplemente usando CSS, sin embargo, al usar este método, el efecto no es confiable en múltiples navegadores. Es por eso que hemos reunido un puñado de bibliotecas JS y complementos de jQuery que le permitirán lograr este diseño de UX en particular sin apenas complicaciones..

1. Waypoints

Waypoints es una biblioteca para ejecutar una función basada en la posición del elemento en la ventana gráfica. Viene con una función de acceso directo que hace que ese elemento “pegajoso”. Puede personalizar la dirección de desplazamiento - arriba, abajo, e incluso Correcto y izquierda - en cuanto a que el elemento debe pegarse dentro de la ventana gráfica.

• Dependencia: Ninguno / jQuery (opcional)
• Licencia: Licencia MIT

2. Kit pegajoso

Con StickyKit, no solo puede hacer que un elemento se adhiera dentro de la ventana gráfica, sino que también puede hacer que se adhieran dentro del elemento principal que designe a varios elementos a la vez. El complemento también viene con algunas configuraciones avanzadas que incluyen eventos personalizados y activadores.

• Dependencia: jQuery
• Licencia: WTFPL

3. StickyJS

StickyJS es un plugin pegajoso jQuery fácil de usar que hace lo que dice. El plugin funciona fuera de la caja. Sin embargo, si necesita alguna personalización, viene con Opciones / Configuración, Métodos personalizados y Eventos.

• Dependencia: jQuery
• Licencia: Licencia MIT

4. Habitación principal

Un encabezado de sitio fijo ocupará un valioso espacio vertical que marcará la diferencia cuando vea el sitio en dispositivos móviles. Espacio para la cabeza es una biblioteca de JavaScript que hará que tu encabezado sea inteligente; el encabezado se ocultará cuando los usuarios se desplacen por la página y se muestren al desplazarse hacia arriba.

• Dependencia: Ninguno / jQuery (opcional) / Angular (opcional)
• Licencia: Licencia MIT

5. MakefixedJS

Arreglado le permite hacer que los elementos se corrijan dinámicamente a medida que los usuarios desplazan la página. Solo llama al makeFixed () Funciona en el elemento que quieras arreglar. Revisa la demo para verla en acción..

• Dependencia: jQuery
• Licencia: GPL

6. MedianocheJS

Medianoche le permite pegar múltiples encabezados / elementos y cambiar entre ellos según su posición dentro del documento (árbol DOM), verifique la demostración para ver a qué me refiero. Además, puede cambiar su color sobre la marcha simplemente añadiendo el medianoche de datos atributo con el nombre de color especificado.

• Dependencia: jQuery
• Licencia: Licencia MIT

7. ScrollMagic

ScrollMagic Tiene características avanzadas para agregar interacción, durante un desplazamiento de página. Puede anclar elementos desde posiciones de desplazamiento específicas, agregar animación en función de la posición de desplazamiento o incluso crear un efecto de paralaje impresionante. La demostración le da una idea de lo que puede hacer este complemento..

• Dependencia: jQuery / Velocity.js
• Licencia: Licencia Dual (MIT y GPL)

8. en la pantalla

en la pantalla es similar a Waypoints: le permite ejecutar funciones a medida que el elemento ingresa, sale o alcanza ciertas posiciones dentro de la ventana del navegador.

• Dependencia: jQuery
• Licencia: Licencia MIT

9. jQuery Pin

jQuery Pin es un pequeño plugin de jQuery para “alfiler” o “desprender” elementos a una posición, cuando se desplaza la página. Mi parte favorita de este complemento es la opción de desactivarlo en ciertos anchos de ventana gráfica..

• Dependencia: jQuery
• Licencia: Licencia BSD

10. Flotador pegajoso

Flotador pegajoso nos permite dar a los elementos una posición fija que es relativa a su padre. Puede configurar la opción adhesiva según sus necesidades con los parámetros proporcionados y cambiando el valor. Coge la demo aquí.

• Dependencia: jQuery
• Licencia: Indefinido

11. Pin de cebra

Pin de cebra Es un complemento ligero para hacer cualquier elemento pin a su contenedor. Con este plugin puedes agregar “pegajoso” a elementos de su proyecto, como a su navegación, barras laterales, encabezados y pies de página, u otros elementos que desee mantener visibles cuando los usuarios se desplazan hacia abajo. Echa un vistazo a la demo.

• Dependencia: jQuery
• Licencia: Licencia GPL

12. HC-Sticky

Con HC-Sticky, puede hacer que los elementos adhesivos se refieran a su contenedor, a cualquier elemento dado o al documento en sí. Este complemento tiene algunas opciones que puede ajustar a sus necesidades, como la distancia desde la parte superior e inferior para comenzar a flotar, y otras opciones.

• Dependencia: jQuery
• Licencia: Licencia MIT

13. Mojo pegajoso

Mojo pegajoso es un complemento de jQuery ligero, rápido y flexible para crear elementos pegajosos increíbles. Es compatible con los navegadores modernos y se degradará con gracia en IE.

• Dependencia: jQuery
• Licencia: Licencia MIT

14. Barra de navegación pegajosa

Si desea realizar una navegación de una sola página que se trabe cuando se desplaza hacia abajo, esta biblioteca es para usted.Barra de navegación pegajosa colocará la navegación en la parte superior de la ventana del navegador y resaltará el enlace de anclaje para conectarse a la sección correspondiente de su página. También puede agregar Animate.css para embellecer el efecto de navegación.

• Dependencia: jQuery
• Licencia: Licencia MIT

15. StickyStack

StickyStack hará que los elementos se apilen con otros cuando los usuarios desplacen el elemento y lleguen a la parte superior de la ventana gráfica. Con esta biblioteca, tu página larga se transformará en tarjetas apiladas..

• Dependencia: jQuery
• Licencia: Indefinido