15 jQuery spraudņi, lai padarītu viedus uzlīmes elementus
Tagad, kad ritiniet uz augšu vai uz leju, piem. navigācijas izvēlni, galveni vai sānjoslu. Tas ļauj elementam viegli piekļūt neatkarīgi no lietotāja atrašanās vietas.
To sauc par lipīgu elementu, to var panākt, tikai izmantojot CSS, tomēr, izmantojot šo metodi, efekts nav uzticams vairākās pārlūkprogrammās. Tāpēc mēs esam izveidojuši nedaudz JS bibliotēku un jQuery spraudņu, kas ļaus jums sasniegt šo konkrēto UX dizainu ar nelielu un bez problēmu..
1. Maršruta punkti
Maršruta punkti ir bibliotēka, lai izpildītu funkciju, pamatojoties uz elementa pozīciju skata logā. Tas nāk ar īsceļu funkciju, kas padara šo elementu “lipīga”. Varat pielāgot ritināšanas virzienu - uz augšu, uz leju, un pat pa labi un pa kreisi - kā elementam jāatrodas skatīšanās logā.
- Atkarība: Nav / jQuery (pēc izvēles)
- Licence: MIT licence
2. Sticky Kit
Ar StickyKit, ne tikai jūs varat izveidot elementu skata logā, bet jūs varat arī padarīt tos pielīdzināmus vecākajam elementam, kuru jūs uzreiz norādāt vairākiem elementiem. Spraudnis ietver arī dažus uzlabotus iestatījumus, tostarp pielāgotus notikumus un trigerus.
- Atkarība: jQuery
- Licence: WTFPL
3. StickyJS
StickyJS ir viegli lietojams jQuery uzlīmes spraudnis, kas to dara. Spraudnis darbojas ārpus kastes. Tomēr, ja jums ir vajadzīgs pielāgojums, tas ir aprīkots ar opcijām / iestatījumiem, pielāgotām metodēm un notikumiem.
- Atkarība: jQuery
- Licence: MIT licence
4. HeadRoom
Lipīga vietnes galvene aizņems vērtīgu vertikālu telpu, kas atšķiras, kad skatāties vietni mobilajā tālrunī. Galda platums ir JavaScript bibliotēka, kas padarīs jūsu lipīgo virsrakstu gudru; galvene tiks paslēpta, kad lietotāji pārvietosies uz leju un parādās uz augšu.
- Atkarība: Nav / jQuery (pēc izvēles) / leņķa (pēc izvēles)
- Licence: MIT licence
5. MakefixedJS
Makefixed ļauj jums dinamiski noteikt elementus, kad lietotāji ritina lapu. Vienkārši izsauciet makeFixed () funkcija, ko vēlaties fiksēt. Pārbaudiet demonstrāciju, lai to redzētu darbībā.
- Atkarība: jQuery
- Licence: GPL
6. MidnightJS
Pusnakts ļauj pielīmēt vairākus galvenes / elementus un pārslēgties starp tiem, pamatojoties uz to atrašanās vietu dokumentā (DOM koks), pārbaudiet demonstrāciju, lai redzētu, ko es domāju. Turklāt jūs varat mainīt to krāsu lidojumā, vienkārši pievienojot dati - pusnakts atribūts ar norādīto krāsu nosaukumu.
- Atkarība: jQuery
- Licence: MIT licence
7. ScrollMagic
ScrollMagic ir uzlabotas funkcijas, lai pievienotu mijiedarbību lapas ritināšanas laikā. Jūs varat piesaistīt elementus no īpašām ritināšanas pozīcijām, pievienot animāciju, kas balstīta uz ritināšanas pozīciju, vai pat padarīt fantastisku paralaksu. Demo sniedz jums ieskatu par to, ko šis spraudnis var darīt.
- Atkarība: jQuery / Velocity.js
- Licence: Dual License (MIT un GPL)
8. ekrānā
uz ekrāna ir līdzīgs maršruta punktiem - tas ļauj jums izpildīt funkcijas, kad elements ieiet, atstāj vai sasniedz konkrētas pozīcijas pārlūkprogrammas skata logā.
- Atkarība: jQuery
- Licence: MIT licence
9. jQuery Pin
jQuery Pin ir mazs jQuery spraudnis “tapu” vai “atvienojiet” elementus pozīcijā, ritinot lapu. Mana iecienītākā šī spraudņa daļa ir iespēja to atspējot noteiktā skatījumu platuma platumā.
- Atkarība: jQuery
- Licence: BSD licence
10. Sticky Float
Sticky Float ļauj mums sniegt elementus fiksētai pozīcijai, kas ir saistīta ar tās vecāku. Sticky opciju var iestatīt atbilstoši savām vajadzībām ar norādītajiem parametriem un mainot vērtību. Nozvejas demo šeit.
- Atkarība: jQuery
- Licence: nenoteikts
11. Zebras taps
Zebras taps ir viegls spraudnis, lai padarītu jebkuru elementu tapu savam konteineram. Ar šo spraudni varat pievienot “lipīga” jūsu projekta elementiem, piemēram, jūsu navigācijai, sānjoslām, galvenēm un kājenēm vai citiem elementiem, kurus vēlaties saglabāt, kad lietotāji ritina uz leju. Pārbaudiet demonstrāciju.
- Atkarība: jQuery
- Licence: GPL licence
12. HC-Sticky
Ar HC-Sticky, jūs varat izveidot lipīgus elementus, kas attiecas uz tās konteineru, jebkuru konkrētu elementu vai pašu dokumentu. Šim spraudnim ir dažas iespējas, kuras varat pielāgot savai vajadzībai, piemēram, attālums no augšas un apakšas, lai sāktu peldošo, un citas iespējas.
- Atkarība: jQuery
- Licence: MIT licence
13. Sticky Mojo
Sticky Mojo ir viegls, ātrs un elastīgs jQuery spraudnis, lai padarītu lieliskus lipīgus elementus. Tas ir saderīgs ar mūsdienu pārlūkprogrammām, un tas pasliktinās IE.
- Atkarība: jQuery
- Licence: MIT licence
14. Sticky Navbar
Ja vēlaties veikt vienas lapas navigāciju, kas paliek uz leju, šī bibliotēka ir paredzēta jums.Sticky Navbar pārvietos navigāciju pārlūkprogrammas loga augšdaļā un iezīmēs enkura saiti, lai izveidotu savienojumu ar attiecīgo sadaļu jūsu lapā. Varat arī pievienot Animate.css, lai izdaiļotu navigācijas efektu.
- Atkarība: jQuery
- Licence: MIT licence
15. StickyStack
StickyStack Kad lietotāji pārvietos elementu un sasniegs skata loga augšdaļu, elementi tiek sakārtoti ar citu. Izmantojot šo bibliotēku, jūsu garā lapa tiks pārvērsta kāršu kartēs.
- Atkarība: jQuery
- Licence: nenoteikts
