15 doplnkov jQuery na vytvorenie inteligentných lepiacich prvkov

Teraz je bežné vidieť určité prvky v lokalite, ktoré sú pripevnené k pozícii pri posúvaní nahor alebo nadol, napr. navigačného menu, záhlavia alebo bočného panela. To umožňuje, aby prvok bol ľahko dostupný bez ohľadu na polohu používateľa.

Volal sa ako lepkavý prvok, čo sa dá dosiahnuť len použitím CSS, avšak s touto metódou efekt nie je spoľahlivý vo viacerých prehliadačoch. To je dôvod, prečo sme vytvorili niekoľko knižníc JS a doplnkov jQuery, ktoré vám umožnia dosiahnuť tento konkrétny dizajn UX s malým až žiadnym problémom.

1. Trasové body

Trasové body sú knižnica na vykonanie funkcie založenej na polohe prvku v výrezu. Dodáva sa s funkciou skratky, ktorá robí tento prvok “lepkavý”. Môžete prispôsobiť smer posúvania - hore, nadol, a dokonca správny a ľavý - čo sa má prvok držať v rámci výrezu.

• závislosť: Žiadne / jQuery (voliteľné)
• licencie: Licencia MIT

2. Sticky Kit

s StickyKit, nielenže môžete urobiť prvok háku v rámci výrezu, ale môžete tiež urobiť, aby sa držali v rodičovskom prvku, ktorý označujete viacerým prvkom naraz. Zásuvný modul obsahuje aj niektoré pokročilé nastavenia vrátane vlastných udalostí a spúšťacích prvkov.

• závislosť: jQuery
• licencie: WTFPL

3. StickyJS

StickyJS je ľahko použiteľný doplnok jQuery slepý, ktorý robí to, čo hovorí. Plugin funguje mimo krabice. Ak však potrebujete nejaké prispôsobenie, prichádza s možnosťami / nastaveniami, vlastnými metódami a udalosťami.

• závislosť: jQuery
• licencie: Licencia MIT

4. HeadRoom

Hlavička lepkavej stránky zaujme cenný vertikálny priestor, ktorý má vplyv na zobrazenie webu v mobilnom zariadení. svetlá výška je knižnica JavaScriptu, ktorá umožní, aby vaša lepkavá hlavička bola inteligentná; záhlavie bude skryté, keď sa používatelia posúvajú nadol a zobrazia sa po posúvaní.

• závislosť: Žiadne / jQuery (voliteľné) / Uhlové (voliteľné)
• licencie: Licencia MIT

5. MakefixedJS

Makefixed umožňuje vykonať dynamické stanovenie prvkov, keď používatelia posúvajú stránku. Stačí zavolať makeFixed () funkciu na prvku, ktorý chcete opraviť. Pozrite sa na demo, aby ste si ho mohli pozrieť na akciu.

• závislosť: jQuery
• licencie: GPL

6. MidnightJS

polnoc umožňuje vám držať viac hlavičiek / elementov a prepínať medzi nimi na základe ich polohy v dokumente (stromu DOM), pozrite sa na demo, aby ste videli, čo mám na mysli. Navyše môžete svoju farbu jednoducho zmeniť pridaním údajov o polnoci atribút so špecifikovaným názvom farby.

• závislosť: jQuery
• licencie: Licencia MIT

7. ScrollMagic

ScrollMagic má pokročilé funkcie na pridanie interakcie počas posúvania stránky. Môžete pripevniť prvky z konkrétnych posunutých pozícií, pridať animáciu na základe pozície posúvania alebo dokonca urobiť úžasný paralaxový efekt. Demo vám ponúka niekoľko poznatkov o tom, čo môže tento plugin robiť.

• závislosť: jQuery / Velocity.js
• licencie: Dual License (MIT a GPL)

8. onScreen

na obrazovke je podobná trasovým bodom - umožňuje vykonávať funkcie, keď prvok vstupuje, odchádza alebo dosiahne určité pozície v prehľade prehliadača.

• závislosť: jQuery
• licencie: Licencia MIT

9. Kolík jQuery

jQuery Pin je malý doplnok jQuery “kolík” alebo “odopnúť” prvky na pozíciu pri rolovaní stránky. Mojou najobľúbenejšou súčasťou tohto doplnku je možnosť zakázať ho na určitých šírkach výrezu.

• závislosť: jQuery
• licencie: Licencia BSD

10. Sticky Float

Sticky Float nám umožňuje dať prvkom pevnú pozíciu, ktorá je relatívna k jej rodičom. Môžete nastaviť lepiacu voľbu podľa vašich potrieb s poskytnutými parametrami a zmenou hodnoty. Ukážte tu demo.

• závislosť: jQuery
• licencie: nedefinovaný

11. Zebra pin

Zebra pin je ľahký zásuvný modul na vytvorenie akéhokoľvek prvku kolíka do kontajnera. Pomocou tohto pluginu môžete pridať “lepkavý-ness” na prvky vo vašom projekte, ako je vaša navigácia, postranné lišty, hlavičky a päty, alebo iné prvky, ktoré chcete vidieť, keď sa používatelia posúvajú nadol. Pozrite sa na demo.

• závislosť: jQuery
• licencie: Licencia GPL

12. HC-Sticky

s HC-Sticky, môžete vytvoriť lepiace prvky, ktoré sa vzťahujú na jeho kontajner, na daný prvok alebo na samotný dokument. Tento doplnok obsahuje niektoré možnosti, ktoré môžete prispôsobiť potrebám, napríklad vzdialenosť od hornej a spodnej strany, aby ste začali plávať, a ďalšie možnosti.

• závislosť: jQuery
• licencie: Licencia MIT

13. Sticky Mojo

Sticky Mojo je ľahký, rýchly a flexibilný doplnok jQuery na vytváranie úžasných lepivých prvkov. Je kompatibilný s modernými prehliadačmi a v IE bude ladne podľahnúť.

• závislosť: jQuery
• licencie: Licencia MIT

14. Sticky Navbar

Ak chcete, aby navigácia s jedným stránkom, ktorá sa drží pri posúvaní, je táto knižnica pre vás.Sticky Navbar umiestni navigáciu v hornej časti okna prehliadača a zvýraznite ukotvenie na pripojenie k príslušnej sekcii na vašej stránke. Môžete tiež pridať Animate.css na skvalitnenie navigačného efektu.

• závislosť: jQuery
• licencie: Licencia MIT

15. StickyStack

StickyStack bude robiť prvky stohovať s iným, keď používatelia posúvajú prvok a dostanú sa do hornej časti výrezu. S touto knižnicou sa vaša dlhá stránka zmení na stohované karty.

• závislosť: jQuery
• licencie: nedefinovaný