15 jQuery pluginad, et teha nutikad kleepuvad elemendid
Nüüd on tavaline näha saidi teatud elemente, mis on saidile kinnitatud, kui sa saidi üles või alla kerivad, nt. navigeerimismenüü, päis või külgriba. See võimaldab elemendil olla kergesti kättesaadav sõltumata kasutaja asukohast.
Seda nimetatakse kleepuvaks elemendiks, seda on võimalik saavutada lihtsalt CSS-i abil, kuid seda meetodit kasutades ei ole efekt mitme brauseri puhul usaldusväärne. Sellepärast oleme koostanud käputäis JS-raamatukogusid ja jQuery-pluginaid, mis võimaldavad teil saavutada selle konkreetse UX-i disaini vähe või üldse mitte vaevata.
1. Teekonnapunktid
Teekonnapunktid on raamatukogu, mis teostab funktsiooni, mis põhineb elementide positsioonil vaateavas. Kaasas otsetee funktsioon, mis muudab selle elemendi “kleepuv”. Kerimise suunda saate kohandada - üles, alla, ja isegi õigus ja vasakule - et element peaks kinni vaateaknas.
- Sõltuvus: Puudub / jQuery (valikuline)
- Litsents: MIT-litsents
2. Kleepuv komplekt
Koos StickyKit, mitte ainult ei saa te vaatluspordis elementi kinni panna, vaid saate ka need jääda vanema elemendi juurde, mida määrate korraga mitmele elemendile. Lisandmoodul sisaldab ka mõningaid täiustatud seadeid, sealhulgas kohandatud sündmusi ja käivitajaid.
- Sõltuvus: jQuery
- Litsents: WTFPL
3. StickyJS
StickyJS on lihtne kasutada jQuery kleepuv plugin, mis teeb seda, mida ta ütleb. Plugin töötab karbist välja. Ometi, kui vajate kohandamist, on tegemist valikute / sätete, kohandatud meetodite ja sündmustega.
- Sõltuvus: jQuery
- Litsents: MIT-litsents
4. HeadRoom
Kleepuva saidi päis võtab väärtuslikku vertikaalset ruumi, mis muudab saidi mobiilil vaatamisel vahet. Kõrgus on JavaScript-raamatukogu, mis teeb teie kleepuva päise tarkaks; päis peidetakse, kui kasutajad sirvivad lehekülge alla ja ilmuvad üles kerimise ajal.
- Sõltuvus: Puudub / jQuery (valikuline) / nurk (valikuline)
- Litsents: MIT-litsents
5. MakefixedJS
Kinnitatud võimaldab teil teha elemente dünaamiliselt fikseerituks, kui kasutajad lehekülge liiguvad. Helista lihtsalt makeFixed () funktsioon, mida soovite kinnitada. Kontrollige demot, et näha toimingut.
- Sõltuvus: jQuery
- Litsents: GPL
6. MidnightJS
Kesköö võimaldab teil kleepida mitu päist / elementi ja vahetada nende vahel, lähtudes nende asukohast dokumendis (DOM puu), vaadake demot, et näha, mida ma mõtlen. Lisaks saate muuta oma värvi lendu lihtsalt lisades andmed - kesköö määratud värvinimega atribuut.
- Sõltuvus: jQuery
- Litsents: MIT-litsents
7. ScrollMagic
ScrollMagic omab täiustatud funktsioone interaktsiooni lisamiseks lehe sirvimise ajal. Te saate lisada elemente konkreetsetest kerimispositsioonidest, lisada animatsiooni, mis põhineb sirvimiskohal, või isegi teha fantastilise parallaksi efekti. Demo annab teile ülevaate sellest, mida see plugin suudab teha.
- Sõltuvus: jQuery / Velocity.js
- Litsents: Kahekordne litsents (MIT ja GPL)
8. ekraanil
ekraanil sarnaneb teekonnapunktidele - see võimaldab teil täita funktsioone, kui element siseneb, lahkub või jõuab teatud positsioonidele brauseri vaatespordis.
- Sõltuvus: jQuery
- Litsents: MIT-litsents
9. jQuery Pin
jQuery Pin on väike jQuery plugin “tihvt” või “eemalda” lehekülje sirvimisel asendisse. Minu kõige populaarsem osa sellest pluginast on võimalus seda teatud vaateakna laiustel keelata.
- Sõltuvus: jQuery
- Litsents: BSD litsents
10. Kleepuv ujuk
Sticky Float võimaldab meil anda elemente fikseeritud positsioonile, mis on tema vanema suhtes. Kleepuvat valikut saab seadistada vastavalt teie vajadustele, kasutades selleks ettenähtud parameetreid ja muutes väärtust. Saage demo siit.
- Sõltuvus: jQuery
- Litsents: Määratlemata
11. Zebra Pin
Zebra Pin on kerge pistik, mis muudab ükskõik millise elemendi oma konteinerile. Selle pluginaga saate lisada “kleepuv” teie projekti elementidele, nagu teie navigeerimisele, külgribadele, päistele ja jalustele või muudele elementidele, mida soovite kasutajate allavajutamisel näha. Tutvu demoga.
- Sõltuvus: jQuery
- Litsents: GPL litsents
12. HC-Sticky
Koos HC-Sticky, saate teha kleepuvaid elemente, mis viitavad selle konteinerisse, mis tahes elemendile või dokumendile ise. Sellel pluginal on mõned võimalused, mida saate kohandada oma vajaduste järgi, näiteks kaugus ülemisest ja alumisest, et alustada ujuvaid, ja muud võimalused.
- Sõltuvus: jQuery
- Litsents: MIT-litsents
13. Kleepuv Mojo
Kleepuv Mojo on kerge, kiire ja paindlik jQuery-plugin, mis teeb suurepäraseid kleepuvaid elemente. See on kooskõlas kaasaegsete brauseritega ja halveneb IE-s.
- Sõltuvus: jQuery
- Litsents: MIT-litsents
14. Kleepuv navar
Kui soovite teha ühe lehekülje navigeerimise, mis kleepub, kui üks kerib alla, on see raamatukogu teile.Kleepuv navar paigutab navigeerimise brauseri akna ülaosas ja tõstab esile ankurlingi, mis on seotud vastava leheküljega. Navigeerimise efekti kaunistamiseks saate lisada ka Animate.css.
- Sõltuvus: jQuery
- Litsents: MIT-litsents
15. StickyStack
StickyStack teeb elemendid virnastamiseks teise, kui kasutajad kerivad elementi ja jõuavad vaatepordi ülaosale. Selle raamatukogu abil muutub teie pikk leht starditud kaartideks.
- Sõltuvus: jQuery
- Litsents: Määratlemata
