15 Vtičniki jQuery za pametne lepljive elemente

Zdaj je običajno, da se nekateri elementi v spletnem mestu, ko se pomikate navzgor ali navzdol po spletnem mestu, npr. navigacijski meni, glavo ali stransko vrstico. To omogoča, da je element na voljo takoj, ne glede na položaj uporabnika.

To imenujemo lepljiv element, kar lahko dosežemo le z uporabo CSS-ja, vendar z uporabo te metode učinek ni zanesljiv v več brskalnikih. Zato smo združili nekaj knjižnic JS in vtičnikov jQuery, ki vam bodo omogočili, da dosežete ta poseben dizajn UX z malo ali brez težav.

1. Točke

Točke poti so knjižnica, ki izvaja funkcijo glede na položaj elementa v prikazovalniku. Na voljo je funkcija bližnjice, ki omogoča ta element “lepljivo”. Smer pomikanja lahko prilagodite - gor, navzdol, in celo prav in levo - kateri element naj se drži v oknu.

• Odvisnost: Brez / jQuery (neobvezno)
• Licenca: Licenca MIT

2. Sticky Kit

S StickyKit, ne samo, da lahko element vstavite v pogled, ampak jih lahko tudi pritrdite v nadrejeni element, ki ga določite za več elementov hkrati. Vtičnik ima tudi nekatere napredne nastavitve, vključno z prilagojenimi dogodki in sprožilci.

• Odvisnost: jQuery
• Licenca: WTFPL

3. StickyJS

StickyJS je preprosta za uporabo jQuery lepljiva vtičnica, ki dela, kar pravi. Vtičnik deluje izven polja. Vendar, če potrebujete nekaj prilagoditev, prihaja z možnostmi / nastavitvami, metodami po meri in dogodki.

• Odvisnost: jQuery
• Licenca: Licenca MIT

4. HeadRoom

Glava lepljive strani bo zavzela dragocen navpični prostor, ki bo pripomogel k ogledu mesta na mobilnem telefonu. Headroom je knjižnica JavaScript, ki bo naredila vašo lepljivo glavo pametno; glava bo skrita, ko se uporabniki pomaknejo navzdol po strani in se prikažejo ob pomikanju navzgor.

• Odvisnost: Brez / jQuery (neobvezno) / kotno (neobvezno)
• Licenca: Licenca MIT

5. MakefixedJS

Makefixed vam omogoča, da elemente določite dinamično, ko se uporabniki pomikajo po strani. Samo pokliči makeFixed () funkcijo elementa, ki ga želite popraviti. Preverite demo, da ga vidite na dejanju.

• Odvisnost: jQuery
• Licenca: GPL

6. MidnightJS

Polnoč vam omogoča, da pritrdite več glav / elementov in preklapljate med njimi glede na njihov položaj v dokumentu (drevo DOM), preverite demo, da vidite, kaj mislim. Poleg tega lahko spremenite njihovo barvo na letenje preprosto z dodajanjem podatki polnoč z določenim imenom barve.

• Odvisnost: jQuery
• Licenca: Licenca MIT

7. ScrollMagic

ScrollMagic ima napredne funkcije za dodajanje interakcij med premikanjem strani. Elemente lahko pripnete iz določenih položajev za pomikanje, dodate animacijo na podlagi položaja drsenja ali celo naredite odličen učinek paralakse. Demo vam ponuja nekaj vpogledov v to, kar lahko počne ta plugin.

• Odvisnost: jQuery / Velocity.js
• Licenca: Dvojna licenca (MIT in GPL)

8. Zaslon

na zaslonu je podoben točkam poti - omogoča izvajanje funkcij, ko element vstopa, izstopa ali doseže določene položaje v prikazovalniku brskalnika.

• Odvisnost: jQuery
• Licenca: Licenca MIT

9. jQuery Pin

jQuery Pin je majhen jQuery vtičnik “pin” ali “odpnite” elemente, ko se pomikate po strani. Moj najljubši del tega vtičnika je možnost, da ga onemogočim pri določenih širinah zaslona.

• Odvisnost: jQuery
• Licenca: BSD licenca

10. Lepljiv plovec

Sticky Float nam omogoča, da elementom določimo fiksno pozicijo, ki je relativna glede na njeno nadrejeno. Lepljivo možnost lahko nastavite glede na vaše potrebe s podanimi parametri in s spreminjanjem vrednosti. Ujemite demo tukaj.

• Odvisnost: jQuery
• Licenca: Nedoločeno

11. Zebra Pin

Zebra Pin je lahek vtičnik, s katerim lahko vsak element vstavite v vsebnik. S tem vtičnikom lahko dodate “lepljivost” elementom v projektu, kot so navigacija, stranske vrstice, glave in noge, ali drugi elementi, ki jih želite ohraniti vidne, ko se uporabniki pomaknejo navzdol. Oglejte si demo.

• Odvisnost: jQuery
• Licenca: GPL licenca

12. HC-lepljivo

S HC-Sticky, lahko naredite lepljive elemente, ki se nanašajo na njegov vsebnik, na kateri koli element ali na sam dokument. Ta vtičnik ima nekaj možnosti, ki jih lahko prilagodite svojim potrebam, kot so razdalja od vrha in dna, da začnete plavajoče, in druge možnosti.

• Odvisnost: jQuery
• Licenca: Licenca MIT

13. Lepljivi Mojo

Lepljivi Mojo je lahek, hiter in fleksibilen jQuery vtičnik, ki omogoča izjemno lepljive elemente. Združljiv je s sodobnimi brskalniki in bo v IE elegantno degradiran.

• Odvisnost: jQuery
• Licenca: Licenca MIT

14. Sticky Navbar

Če želite narediti navigacijo po eni strani, ki se bo držala, ko se pomikate navzdol, je ta knjižnica za vas.Sticky Navbar bo postavil navigacijo na vrh okna brskalnika in označil sidrno povezavo, da se poveže z ustreznim odsekom na vaši strani. Dodate lahko tudi Animate.css, da okrasite navigacijski učinek.

• Odvisnost: jQuery
• Licenca: Licenca MIT

15. StickyStack

StickyStack bo elemente zložil z drugim, ko bodo uporabniki drseli po elementu in dosegli vrh okna. S to knjižnico se bo vaša dolga stran pretvorila v zložene kartice.

• Odvisnost: jQuery
• Licenca: Nedoločeno