15 jQuery-plugger for å lage smarte klistremerker

Det er nå vanlig å se visse elementer på et nettsted som er festet til en posisjon når du ruller opp eller ned på siden, f.eks. navigasjonsmenyen, overskriften eller sidebjelken. Dette gjør at elementet er lett tilgjengelig uavhengig av brukerens posisjon.

Kalt et klebrig element, dette kan oppnås bare ved å bruke CSS, men ved hjelp av denne metoden er effekten ikke pålitelig på tvers av flere nettlesere. Det er derfor vi har satt sammen en håndfull JS-biblioteker og jQuery-plugins som gjør at du kan oppnå denne UX-designen med liten eller ingen problemer.

1. Veipunkter

Waypoints er et bibliotek for å utføre en funksjon basert på elementposisjonen i visningsporten. Den leveres med en snarvei-funksjon som gjør det elementet “klissete”. Du kan tilpasse rullingsretningen - opp, ned, Til og med Ikke sant og venstre - om hvilken elementet skal holde seg innenfor visningsporten.

• avhengighet: Ingen / jQuery (valgfritt)
• Tillatelse: MIT lisens

2. Sticky Kit

Med StickyKit, Ikke bare kan du lage en elementpinne i visningsporten, men du kan også få dem til å holde seg innenfor det overordnede elementet du angir til flere elementer samtidig. Pluggen kommer også med noen avanserte innstillinger, inkludert egendefinerte hendelser og utløsere.

• avhengighet: jQuery
• Tillatelse: WTFPL

3. StickyJS

StickyJS er et brukervennlig jQuery klebrig plugin som gjør hva det står. Pluggen virker ut av esken. Likevel, hvis du trenger litt tilpasning, kommer det med Valg / Innstillinger, Tilpassede metoder og hendelser.

• avhengighet: jQuery
• Tillatelse: MIT lisens

4. HeadRoom

En krevende sidehode vil ta opp verdifull vertikal plass som gjør en forskjell når du ser på nettstedet på mobilen. takhøyde er et JavaScript-bibliotek som vil gjøre din klissete header smart; toppteksten vil bli skjult når brukerne ruller nedover siden og vises ved rulling opp.

• avhengighet: Ingen / jQuery (valgfritt) / Vinkel (valgfritt)
• Tillatelse: MIT lisens

5. MakefixedJS

Makefixed Lar deg få elementer til å bli fastgjort dynamisk når brukerne rulle på siden. Bare ring makeFixed () Funksjon på elementet du vil ha fast. Sjekk demoen for å se den på handling.

• avhengighet: jQuery
• Tillatelse: GPL

6. MidnightJS

Midnatt lar deg holde flere overskrifter / elementer og bytte mellom dem basert på deres posisjon i dokumentet (DOM-treet), sjekk demoen for å se hva jeg mener. I tillegg kan du endre fargen på flyet ved å legge til data-midnatt Tilordne med det angitte fargeneavnet.

• avhengighet: jQuery
• Tillatelse: MIT lisens

7. ScrollMagic

ScrollMagic har avanserte funksjoner for å legge til interaksjon, under en siderulle. Du kan knytte elementer fra bestemte rullestillinger, legge til animasjon basert på rulleposisjon, eller til og med lage en fantastisk parallax-effekt. Demoen gir deg litt innsikt i hva dette pluginet kan gjøre.

• avhengighet: jQuery / Velocity.js
• Tillatelse: Dual License (MIT og GPL)

8. på skjermen

på skjermen ligner veipunkter - det lar deg utføre funksjoner etter hvert som elementet kommer inn, forlater eller når bestemte posisjoner i nettleserens visningsport.

• avhengighet: jQuery
• Tillatelse: MIT lisens

9. jQuery Pin

jQuery Pin er en liten jQuery-plugin til “tapp” eller “løsne” elementer til en posisjon, når du ruller på siden. Min mest favorittdel av denne plugin er muligheten til å deaktivere den ved bestemte visningsbredder.

• avhengighet: jQuery
• Tillatelse: BSD lisens

10. Sticky Float

Sticky Float gir oss mulighet til å gi elementene en fast stilling som er i forhold til foreldrene. Du kan angi det klare alternativet i henhold til dine behov med de angitte parametrene og ved å endre verdien. Fang demoen her.

• avhengighet: jQuery
• Tillatelse: undefined

11. Zebra Pin

Zebra Pin er en lett plugin for å gjøre elementet pin til containeren. Med dette pluginet kan du legge til “klebrig-ness” til elementer i prosjektet ditt som navigasjon, sidebjelker, overskrifter og bunntekster eller andre elementer som du vil beholde synlig når brukerne ruller ned. Sjekk ut demoen.

• avhengighet: jQuery
• Tillatelse: GPL-lisens

12. HC-Sticky

Med HC-Prioritert, Du kan lage klissete elementer som refererer til beholderen, til et gitt element, eller til selve dokumentet. Dette pluginet har noen alternativer som du kan tilpasse til ditt behov, som avstand fra toppen og bunnen for å starte flytende og andre alternativer.

• avhengighet: jQuery
• Tillatelse: MIT lisens

13. Sticky Mojo

Sticky Mojo er en lett, rask og fleksibel jQuery-plugin for å lage fantastiske, klebrige elementer. Den er kompatibel med moderne nettlesere og vil degradere grasiøst i IE.

• avhengighet: jQuery
• Tillatelse: MIT lisens

14. Sticky Navbar

Hvis du vil lage enkeltnavigering som stikker når man ruller ned, er dette biblioteket for deg.Sticky Navbar vil sette navigasjonen øverst i nettleservinduet og markere ankerlinken for å koble til den tilsvarende delen på siden din. Du kan også legge til Animate.css for å forskjøre navigasjonseffekten.

• avhengighet: jQuery
• Tillatelse: MIT lisens

15. StickyStack

StickyStack vil gjøre elementene stakk med en annen når brukerne ruller elementet og når toppen av visningsporten. Med dette biblioteket vil din lange side forvandles til stablede kort.

• avhengighet: jQuery
• Tillatelse: undefined