15 jQuery Plugin per rendere Smart Sticky Elements

È ormai comune vedere determinati elementi in un sito fissati a una posizione quando scorri verso l'alto o verso il basso nel sito, ad es. il menu di navigazione, l'intestazione o la barra laterale. Ciò consente all'elemento di essere facilmente disponibile indipendentemente dalla posizione dell'utente.

Chiamato un elemento appiccicoso, questo può essere ottenuto solo utilizzando CSS, tuttavia, utilizzando questo metodo, l'effetto non è affidabile su più browser. Questo è il motivo per cui abbiamo messo insieme una manciata di librerie JS e plugin jQuery che ti permetteranno di ottenere questo particolare design UX con poco o nessun problema.

1. Waypoint

Waypoint è una libreria per eseguire una funzione in base alla posizione dell'elemento nella finestra. Viene fornito con una funzione di scelta rapida che rende quell'elemento “appiccicoso”. È possibile personalizzare la direzione di scorrimento - su, giù, e persino destra e sinistra - in merito a quale elemento deve rimanere all'interno del viewport.

• Dipendenza: Nessuno / jQuery (facoltativo)
• Licenza: Licenza MIT

2. Kit appiccicoso

Con StickyKit, non solo puoi far aderire un elemento all'interno del viewport, ma puoi anche farlo rimanere all'interno dell'elemento genitore che hai designato su più elementi contemporaneamente. Il plugin include anche alcune impostazioni avanzate tra cui eventi personalizzati e trigger.

• Dipendenza: jQuery
• Licenza: WTFPL

3. StickyJS

StickyJS è un plug-in appiccicoso jQuery di facile utilizzo che fa ciò che dice. Il plugin funziona fuori dalla scatola. Tuttavia, se hai bisogno di personalizzazione, viene fornito con Opzioni / Impostazioni, Metodi personalizzati ed Eventi.

• Dipendenza: jQuery
• Licenza: Licenza MIT

4. HeadRoom

Un'intestazione del sito appiccicosa occuperà spazio verticale prezioso che fa la differenza quando si visualizza il sito su dispositivo mobile. headroom è una libreria JavaScript che renderà intelligente la tua intestazione appiccicosa; l'intestazione verrà nascosta quando gli utenti scorreranno la pagina verso il basso e si visualizzeranno durante lo scorrimento verso l'alto.

• Dipendenza: Nessuno / jQuery (facoltativo) / Angolare (facoltativo)
• Licenza: Licenza MIT

5. MakefixedJS

Makefixed ti consente di correggere gli elementi in modo dinamico mentre gli utenti sfogliano la pagina. Basta chiamare il makeFixed () funzione sull'elemento che vuoi correggere. Controlla la demo per vederla in azione.

• Dipendenza: jQuery
• Licenza: GPL

6. MidnightJS

Mezzanotte ti permette di attaccare più intestazioni / elementi e passare da uno all'altro in base alla loro posizione all'interno del documento (albero DOM), controlla la demo per vedere cosa intendo. Inoltre puoi cambiare il loro colore al volo semplicemente aggiungendo il Dati a mezzanotte attributo con il nome del colore specificato.

• Dipendenza: jQuery
• Licenza: Licenza MIT

7. ScrollMagic

ScrollMagic ha funzionalità avanzate per aggiungere interazione, durante lo scorrimento di una pagina. Puoi appuntare elementi da posizioni di scorrimento specifiche, aggiungere animazioni basate sulla posizione di scorrimento o persino creare un effetto di parallasse impressionante. La demo offre alcune informazioni su ciò che questo plugin può fare.

• Dipendenza: jQuery / Velocity.js
• Licenza: Doppia licenza (MIT e GPL)

8. schermo

sullo schermo è simile ai Waypoint: consente di eseguire funzioni quando l'elemento sta entrando, uscendo o raggiungendo determinate posizioni all'interno della finestra del browser.

• Dipendenza: jQuery
• Licenza: Licenza MIT

9. Pin jQuery

jQuery Pin è un piccolo plugin jQuery per “perno” o “sbloccare” elementi in una posizione, quando si scorre la pagina. La mia parte più preferita di questo plugin è l'opzione per disabilitarla in certe larghezze di viewport.

• Dipendenza: jQuery
• Licenza: Licenza BSD

10. Galleggiante appiccicoso

Galleggiante appiccicoso ci consente di dare agli elementi una posizione fissa che è relativa al suo genitore. È possibile impostare l'opzione adesiva in base alle proprie esigenze con i parametri forniti e modificando il valore. Prendi la demo qui.

• Dipendenza: jQuery
• Licenza: Non definito

11. Pin Zebra

Pin Zebra è un plugin leggero per rendere qualsiasi elemento pin al proprio contenitore. Con questo plugin puoi aggiungere “appiccicoso-ness” agli elementi del tuo progetto piace la tua navigazione, barre laterali, intestazioni e piè di pagina, o altri elementi che vuoi mantenere visibili quando gli utenti scorrono verso il basso. Guarda la demo.

• Dipendenza: jQuery
• Licenza: Licenza GPL

12. HC-appiccicoso

Con HC-Sticky, puoi creare elementi appiccicosi che si riferiscono al suo contenitore, a un determinato elemento o al documento stesso. Questo plugin ha alcune opzioni che puoi adattare alle tue necessità, ad esempio la distanza dall'alto e dal basso per iniziare a fluttuare e altre opzioni.

• Dipendenza: jQuery
• Licenza: Licenza MIT

13. Sticky Mojo

Sticky Mojo è un plugin jQuery leggero, veloce e flessibile per creare fantastici elementi appiccicosi. È compatibile con i browser moderni e si degraderà con grazia in IE.

• Dipendenza: jQuery
• Licenza: Licenza MIT

14. Barra di navigazione appiccicosa

Se vuoi rendere la navigazione in una sola pagina che si attacca quando uno scorre verso il basso, questa libreria è per te.Barra di navigazione appiccicosa metterà la navigazione nella parte superiore della finestra del browser e evidenzierà il collegamento di ancoraggio per la connessione alla sezione corrispondente nella pagina. Puoi anche aggiungere Animate.css per abbellire l'effetto di navigazione.

• Dipendenza: jQuery
• Licenza: Licenza MIT

15. StickyStack

StickyStack farà impilare gli elementi con un altro quando gli utenti scorrono l'elemento e raggiungono la parte superiore della finestra. Con questa libreria, la tua pagina lunga si trasformerà in carte impilate.

• Dipendenza: jQuery
• Licenza: Non definito