15 pluginuri jQuery pentru a face elemente inteligente lipicioase

Acum este obișnuit să vedeți anumite elemente dintr-un site fixat într-o poziție când derulați în sus sau în jos de pe site, de ex. meniul de navigare, antetul sau bara laterală. Aceasta permite ca elementul să fie disponibil imediat, indiferent de poziția utilizatorului.

Numit un element lipicios, acest lucru poate fi realizat doar prin utilizarea CSS, cu toate acestea, folosind această metodă, efectul nu este fiabil în mai multe browsere. Acesta este motivul pentru care am pus împreună o mână de biblioteci JS și jQuery plugin-uri care vă vor permite să realizați acest design special UX cu puțin până la nici un hassle.

1. Puncte

Punctele de parcurs reprezintă o bibliotecă care execută o funcție bazată pe poziția elementului din fereastra de vizualizare. Are o funcție de comenzi rapide care face acest element “lipicios”. Puteți personaliza direcția de defilare - sus, jos, și chiar dreapta și stânga - cu privire la care elementul ar trebui să rămână în fereastra de vizualizare.

• Dependenţă: Niciunul / jQuery (opțional)
• Licență: Licență MIT

2. Sticky Kit

Cu StickyKit, nu numai că puteți face un stick element în fereastra de vizualizare, dar puteți, de asemenea, le face să rămână în interiorul elementului părinte pe care îl desemnați pentru mai multe elemente simultan. Plugin-ul vine, de asemenea, cu unele setări avansate, inclusiv evenimente personalizate și declanșatoare.

• Dependenţă: jQuery
• Licență: WTFPL

3. StickyJS

StickyJS este un plugin ușor de folosit jQuery lipicios care face ceea ce spune. Pluginul funcționează din cutie. Cu toate acestea, dacă aveți nevoie de o particularizare, este disponibilă cu opțiuni / setări, metode personalizate și evenimente.

• Dependenţă: jQuery
• Licență: Licență MIT

4.Ghidul principal

Un antet al site-ului lipicios va ocupa un spațiu verticos important care face diferența atunci când vizualizați site-ul pe mobil. Marjă este o bibliotecă JavaScript care va face antetul dvs. lipicios inteligent; antetul va fi ascuns atunci când utilizatorii defilați în jos pe pagină și vor apărea la derulare.

• Dependenţă: Niciunul / jQuery (opțional) / Angular (opțional)
• Licență: Licență MIT

5. MakefixedJS

Makefixed vă permite să stabiliți dinamic elemente în timp ce utilizatorii defilați pagina. Numai apela makeFixed () funcția pe elementul pe care doriți să îl fixați. Verificați demo-ul pentru a vedea acțiunea.

• Dependenţă: jQuery
• Licență: GPL

6. MidnightJS

Miezul nopţii vă permite să lipiți mai multe antete / elemente și să comutați între ele în funcție de poziția lor în document (copac DOM), verificați demo-ul pentru a vedea ce vreau să spun. În plus, puteți schimba culoarea lor în zbor doar prin adăugarea date la miezul nopții atribut cu numele de culoare specificat.

• Dependenţă: jQuery
• Licență: Licență MIT

7. ScrollMagic

ScrollMagic are funcții avansate pentru a adăuga interacțiunea, în timpul derulării unei pagini. Puteți să fixați elementele de pe anumite poziții de defilare, să adăugați animație în funcție de poziția de defilare sau chiar să faceți un efect minunat de parallax. Demo-ul vă oferă câteva informații despre ce poate face acest plugin.

• Dependenţă: jQuery / Velocity.js
• Licență: Licență dublă (MIT și GPL)

8. pe ecran

pe ecran este similară cu Waypoints - vă permite să executați funcții în timp ce elementul intră, iese sau atinge anumite poziții în fereastra de vizualizare a browserului.

• Dependenţă: jQuery
• Licență: Licență MIT

9. Pinul jQuery

jQuery Pin este un mic plugin jQuery pentru “bolț” sau “anula fixarea” elemente la o poziție, atunci când defilați pagina. Partea mea cea mai preferată a acestui plugin este opțiunea de ao dezactiva la anumite lățimi ale ferestrei de vizualizare.

• Dependenţă: jQuery
• Licență: Licență BSD

10. Float lipicios

Sticlă plutitoare ne permite să oferim elemente o poziție fixă ​​care este relativă la părintele său. Puteți seta opțiunea lipicioasă în funcție de nevoile dvs. cu parametrii furnizați și modificând valoarea. Prindeți demo-ul aici.

• Dependenţă: jQuery
• Licență: Nedefinit

11. Pinul Zebra

Zebra Pin este un plugin ușor pentru a face orice element PIN în container. Cu acest plugin puteți adăuga “Sticky-ness” la elementele din proiect, cum ar fi navigarea, barele laterale, anteturile și subsolurile sau alte elemente pe care doriți să le păstrați vizibile atunci când utilizatorii scot în jos. Verificați demo-ul.

• Dependenţă: jQuery
• Licență: Licență GPL

12. HC-lipicios

Cu HC-Sticky, puteți face elemente lipicioase care se referă la containerul său, la orice element dat sau la documentul însuși. Acest plugin are câteva opțiuni pe care le puteți ajusta la nevoile dvs., cum ar fi distanța de sus și de jos pentru a începe să plutească și alte opțiuni.

• Dependenţă: jQuery
• Licență: Licență MIT

13. Mojo lipicios

Sticky Mojo este un plugin jQuery ușor, rapid și flexibil pentru a face elemente lipicioase. Este compatibil cu browserele moderne și se va degrada cu grație în IE.

• Dependenţă: jQuery
• Licență: Licență MIT

14. Sticlă Navbar

Dacă doriți să faceți o navigare cu o singură pagină care se lipsește atunci când o derulați în jos, această bibliotecă este pentru dvs..Sticlă Navbar va pune navigația în partea de sus a ferestrei browserului și va evidenția link-ul de ancorare pentru a vă conecta la secțiunea corespunzătoare de pe pagina dvs. De asemenea, puteți adăuga Animate.css pentru a înfrumuseța efectul de navigare.

• Dependenţă: jQuery
• Licență: Licență MIT

15. StickyStack

StickyStack va face ca elementele să se suprapună cu altul atunci când utilizatorii defilau elementul și ajung în partea de sus a ferestrei de vizualizare. Cu această bibliotecă, pagina dvs. lungă se va transforma în cărți stivuite.

• Dependenţă: jQuery
• Licență: Nedefinit