15 jQuery bővítmények intelligens ragadós elemek készítéséhez

Most már gyakori, hogy a webhely bizonyos elemeit egy pozícióhoz rögzítjük, amikor felfelé vagy lefelé görgetünk, pl. a navigációs menüt, a fejlécet vagy az oldalsávot. Ez lehetővé teszi, hogy az elem könnyen elérhető legyen a felhasználó helyzetétől függetlenül.

Ezt ragadós elemnek nevezzük, ez csak a CSS használatával érhető el, azonban ennek a módszernek a használata több böngészőben nem megbízható. Éppen ezért összeállítottunk egy pár JS könyvtárat és jQuery plugint, amelyek lehetővé teszik, hogy ezt az UX tervezést kevésbé kellemetlen módon elérni.

1. Útpontok

Az útvonalpontok egy könyvtár, amely a nézetablakban lévő elempozíció alapján függvényt hajt végre. Egy gyorsbillentyű funkcióval rendelkezik, amely ezt az elemet teszi “ragadós”. Testre szabhatja a görgetési irányt - fel, le-, sőt még jobb és balra - az elemnek meg kell ragadnia a nézetablakban.

• Függőség: Nincs / jQuery (opcionális)
• Engedély: MIT licenc

2. Öntapadó készlet

Val vel StickyKit, nemcsak egy elemet bízhat meg a nézetablakban, hanem azt is, hogy egyszerre több elemre kijelölt szülőelemben maradjon. A bővítmény néhány speciális beállítást is tartalmaz, beleértve az egyéni eseményeket és a triggereket is.

• Függőség: jQuery
• Engedély: WTFPL

3. StickyJS

StickyJS egy könnyen használható jQuery ragadós plugin, ami azt teszi, amit mond. A plugin a dobozból nem működik. Mégis, ha valamilyen testreszabásra van szüksége, akkor az Opciók / Beállítások, az Egyéni módszerek és az Események.

• Függőség: jQuery
• Engedély: MIT licenc

4. HeadRoom

A ragadós oldalfejléc értékes, vertikális helyet foglal el, ami változik, amikor a webhelyet mobilon nézzük. belmagassága egy JavaScript könyvtár, amely intelligensen teszi a ragadós fejlécet; a fejléc elrejtésre kerül, ha a felhasználók lapozzák lefelé az oldalt, és felfelé mutatnak.

• Függőség: Nincs / jQuery (opcionális) / szög (opcionális)
• Engedély: MIT licenc

5. MakefixedJS

Makefixed lehetővé teszi az elemek dinamikus rögzítését, amikor a felhasználók lapozzák az oldalt. Csak hívd fel makeFixed () funkció a kívánt elemen. Ellenőrizze a bemutatót, hogy láthassa a műveletet.

• Függőség: jQuery
• Engedély: GPL

6. MidnightJS

Éjfél lehetővé teszi, hogy több fejlécet / elemet ragadjon meg és váltson közöttük a dokumentumon belüli pozíciójuk alapján (DOM fa), nézd meg a demót, hogy lássam, mit értem. Ezenkívül egyszerűen módosíthatja színüket a repülésen adatok éjfél attribútum a megadott színnévvel.

• Függőség: jQuery
• Engedély: MIT licenc

7. ScrollMagic

ScrollMagic fejlett funkciókkal rendelkezik az interakció hozzáadásához egy lapozás közben. Az egyes görgetési pozíciókból az elemeket beillesztheti, a görgetési pozíció alapján animációt adhat hozzá, vagy akár egy parallaxishatást is okozhat. A bemutató néhány betekintést ad arra, hogy mit tehet ez a bővítmény.

• Függőség: jQuery / Velocity.js
• Engedély: Kettős licenc (MIT és GPL)

8. Képernyőn

a képernyőn hasonló az útpontokhoz - lehetővé teszi a funkciók végrehajtását, mivel az elem belép, kilép, vagy eléri a böngésző nézetablakban bizonyos pozíciókat.

• Függőség: jQuery
• Engedély: MIT licenc

9. jQuery Pin

jQuery Pin egy kis jQuery plugin “tű” vagy “kibont” elemeket a pozícióba, amikor az oldalt görgetjük. Ennek a bővítménynek a legkedveltebb része az a lehetőség, hogy bizonyos nézetablakok szélességében letilthatja azt.

• Függőség: jQuery
• Engedély: BSD licenc

10. Öntapadó úszó

Öntapadó úszó lehetővé teszi számunkra, hogy olyan elemeket adjunk meg, amelyek a szülőjéhez viszonyítva rögzített helyzetben vannak. Beállíthatja a ragadós opciót az Ön igényeinek megfelelően a megadott paraméterekkel és az érték megváltoztatásával. Fogja meg a demót itt.

• Függőség: jQuery
• Engedély: Határozatlan

11. Zebra csap

Zebra csap egy könnyű plugin, amely bármely elemcsapját a tartályukhoz teszi. Ezt a bővítményt hozzáadhatja “ragacsos-ség” a projekt elemeihez hasonlóan, mint a navigációhoz, az oldalsávokhoz, a fejlécekhez és a láblécekhez, vagy más olyan elemekhez, amelyeket a felhasználók lefelé görgetése közben szeretnénk látni. Nézze meg a demót.

• Függőség: jQuery
• Engedély: GPL licenc

12. HC-Sticky

Val vel HC-Ragadós, tudsz ragadós elemeket készíteni, amelyek a tartályára, bármely adott elemre vagy maga a dokumentumra utalnak. Ez a bővítmény néhány olyan opcióval rendelkezik, amellyel az Ön igényeihez igazodhat, például a felső és alsó távolságtól kezdve a lebegéshez, és egyéb lehetőségek.

• Függőség: jQuery
• Engedély: MIT licenc

13. Öntapadó Mojo

Öntapadó Mojo egy könnyű, gyors és rugalmas jQuery plugin, ami félelmetes ragadós elemeket hoz létre. Ez kompatibilis a modern böngészőkkel, és kíméletesen romlik az IE-ben.

• Függőség: jQuery
• Engedély: MIT licenc

14. Sticky Navbar

Ha egyoldalas navigációt szeretne végrehajtani, amikor az egyik görgetés lefelé lép, akkor ez a könyvtár az Ön számára készült.Sticky Navbar a navigációt a böngészőablak tetejére helyezi, és kijelöli a horgony linket, hogy csatlakozzon az oldal megfelelő részéhez. Az Animate.css-t is hozzáadhatja a navigációs hatás szépítéséhez.

• Függőség: jQuery
• Engedély: MIT licenc

15. StickyStack

StickyStack az elemeket egymásra rakja, ha a felhasználók lapozzák az elemet, és elérik a nézetablak tetejét. Ezzel a könyvtárral a hosszú oldala halmozott kártyává alakul.

• Függőség: jQuery
• Engedély: Határozatlan