15 Dodaci jQuery za izradu pametnih sticky elemenata
Sada je uobičajeno vidjeti određene elemente na web-lokaciji koji su fiksirani na poziciju kada se pomičete gore ili dolje na web-lokaciji, npr. navigacijski izbornik, zaglavlje ili bočnu traku. To omogućuje elementu da bude lako dostupan bez obzira na položaj korisnika.
Nazvan ljepljivim elementom, to se može postići samo pomoću CSS-a, međutim, koristeći ovu metodu, učinak nije pouzdan u više preglednika. Zato smo sastavili pregršt JS knjižnica i jQuery dodataka koji će vam omogućiti da postignete ovaj UX dizajn s malo ili nimalo gnjavaže.
1. Putne točke
Putne točke su knjižnica za izvršavanje funkcije na temelju položaja elementa u okviru za prikaz. Dolazi s funkcijom prečaca koja čini taj element “ljepljiv”. Smjer pomicanja možete prilagoditi - gore, dolje, pa čak i pravo i lijevo - na koji element bi se trebalo držati unutar okvira za prikaz.
- zavisnost: Nema / jQuery (izborno)
- licenca: MIT licenca
2. Sticky Kit
S StickyKit, ne samo da možete napraviti element koji se drži unutar okvira za prikaz, već ih možete i staviti unutar nadređenog elementa koji odredite za više elemenata odjednom. Dodatak također dolazi s nekim naprednim postavkama, uključujući prilagođene događaje i okidače.
- zavisnost: jQuery
- licenca: WTFPL
3. StickyJS
StickyJS je jednostavan za korištenje jQuery sticky plugin koji radi ono što piše. Dodatak radi izvan okvira. Ipak, ako trebate neke prilagodbe, dolazi s opcijama / postavkama, prilagođenim metodama i događajima.
- zavisnost: jQuery
- licenca: MIT licenca
4. HeadRoom
Ljepljiva zaglavlja stranice zauzimaju vrijedan vertikalni prostor koji čini razliku kada pregledavate web-lokaciju na mobitelu. Prostor za glavu je JavaScript biblioteka koja će učiniti vaše ljepljivo zaglavlje pametnim; zaglavlje će biti skriveno kada se korisnici pomiču prema dolje po stranici i pojavljuju se nakon pomicanja prema gore.
- zavisnost: Nema / jQuery (izborno) / kutno (opcionalno)
- licenca: MIT licenca
5. MakefixedJS
Makefixed omogućuje vam da elemente dinamički fiksirate dok se korisnici pomiču po stranici. Samo nazovi makeFixed () funkcija na željenom elementu. Pogledajte demo da biste ga vidjeli na akciji.
- zavisnost: jQuery
- licenca: GPL
6. MidnightJS
Ponoć omogućuje vam da stavite više zaglavlja / elemenata i prebacujete se između njih na temelju njihovog položaja unutar dokumenta (DOM stablo), provjerite demo da biste vidjeli na što mislim. Osim toga možete mijenjati njihovu boju u letu jednostavno dodavanjem podataka ponoći atribut s navedenim nazivom boje.
- zavisnost: jQuery
- licenca: MIT licenca
7. ScrollMagic
ScrollMagic ima napredne značajke za dodavanje interakcije tijekom pomicanja stranice. Možete vezati elemente iz određenih scroll pozicija, dodati animacije na temelju scroll pozicije, ili čak napraviti strašan efekt paralakse. Demo vam daje uvid u ono što ovaj dodatak može učiniti.
- zavisnost: jQuery / Velocity.js
- licenca: Dvojna licenca (MIT i GPL)
8. na zaslonu
na zaslonu sličan je putnim točkama - omogućuje vam izvršavanje funkcija dok element ulazi, izlazi ili doseže određene pozicije u okviru za prikaz preglednika.
- zavisnost: jQuery
- licenca: MIT licenca
9. Pin Pin
jQuery Pin je mali jQuery dodatak “igla” ili “raskovati” elemente na mjesto, kada se pomičete po stranici. Moj najomiljeniji dio ovog dodatka je opcija da ga onemogućite na određenim širinama prikaza.
- zavisnost: jQuery
- licenca: BSD licenca
10. Ljepljiva plovka
Sticky Float dopušta nam da elementima damo fiksnu poziciju koja je u odnosu na roditelja. Možete postaviti opciju ljepljive prema vašim potrebama pomoću navedenih parametara i promjenom vrijednosti. Uhvatite demo ovdje.
- zavisnost: jQuery
- licenca: Nedefiniran
11. Zebra Pin
Zebra Pin je lagani dodatak za izradu bilo kojeg elementa u spremniku. S ovim dodatkom možete dodati “ljepljive ugođaj” na elemente u projektu poput navigacije, bočnih traka, zaglavlja i podnožja ili drugih elemenata koje želite zadržati vidljivim kada se korisnici pomiču prema dolje. Pogledajte demo.
- zavisnost: jQuery
- licenca: GPL licenca
12. HC-ljepljivo
S HC-Vaľno, možete napraviti ljepljive elemente koji se odnose na njegov spremnik, na bilo koji element ili na sam dokument. Ovaj dodatak ima neke opcije koje možete prilagoditi svojim potrebama, kao što je udaljenost od vrha i dna za početak plutanja i druge opcije.
- zavisnost: jQuery
- licenca: MIT licenca
13. Sticky Mojo
Sticky Mojo je lagan, brz i fleksibilan jQuery dodatak za izradu izvrsnih ljepljivih elemenata. Kompatibilan je s modernim preglednicima i degradira se u IE.
- zavisnost: jQuery
- licenca: MIT licenca
14. Sticky Navbar
Ako želite napraviti navigaciju po jednoj stranici koja se zadržava kada se pomičete prema dolje, ova knjižnica je za vas.Sticky Navbar stavit će navigaciju na vrh prozora preglednika i označiti vezu sidra za povezivanje s odgovarajućim odjeljkom na vašoj stranici. Također možete dodati Animate.css da uljepšate navigacijski efekt.
- zavisnost: jQuery
- licenca: MIT licenca
15. StickyStack
StickyStack učinit će da se elementi slažu s drugim kada korisnici pomaknu element i dođu do vrha okvira za prikaz. S ovom knjižnicom, vaša duga stranica pretvorit će se u složene kartice.
- zavisnost: jQuery
- licenca: Nedefiniran
