15 jQuery-plugins til at gøre Smart Sticky Elements

Det er nu almindeligt at se visse elementer på et websted, der er fastgjort til en position, når du rulle op eller ned på siden, f.eks. navigationsmenuen, overskriften eller sidebjælken. Dette gør det muligt for elementet at være let tilgængeligt uanset brugerens position.

Kaldet et klæbrig element, dette kan opnås ved blot at bruge CSS, men ved hjælp af denne metode er effekten ikke pålidelig på tværs af flere browsere. Derfor har vi sammensat en håndfuld JS-biblioteker og jQuery-plugins, der giver dig mulighed for at opnå dette UX-design med lidt eller intet problem.

1. Waypoints

Waypoints er et bibliotek til at udføre en funktion baseret på elementets position i visningsporten. Den leveres med en genvejstjeneste, der gør det element “klæbrig”. Du kan tilpasse rullevejledningen - op, ned, og endda ret og venstre - om hvilken elementet skal holde sig inden for visningsporten.

Afhængighed: Ingen / jQuery (valgfri)
Licens: MIT licens

2. Sticky Kit

Med StickyKit, Ikke kun kan du lave en elementstang inden i visningsporten, men du kan også få dem til at holde fast i det overordnede element, du angiver til flere elementer på én gang. Proppen leveres også med nogle avancerede indstillinger, herunder brugerdefinerede begivenheder og udløsere.

Afhængighed: jQuery
Licens: WTFPL

3. StickyJS

StickyJS er en nem at bruge jQuery klæbrig plugin, der gør hvad det siger. Pluginet virker ud af kassen. Men hvis du har brug for nogle tilpasninger, leveres det med indstillinger / indstillinger, brugerdefinerede metoder og begivenheder.

Afhængighed: jQuery
Licens: MIT licens

4. HeadRoom

Et klæbrig webstedshoved vil optage værdifulde lodrette rum, der gør en forskel, når du ser webstedet på mobilen. Ståhøjde er et JavaScript-bibliotek, der gør din klæbende overskrift smart; overskriften vil blive skjult, når brugerne ruller ned på siden og viser sig ved at rulle op.

Afhængighed: Ingen / jQuery (valgfri) / Vinkel (valgfri)
Licens: MIT licens

5. MakefixedJS

Makefixed lader dig gøre elementer fastgjort dynamisk, som brugere rulle på siden. Bare ring til makeFixed () funktion på elementet du vil have fast. Se demoen for at se den på handling.

Afhængighed: jQuery
Licens: GPL

6. MidnightJS

Midnat giver dig mulighed for at holde flere overskrifter / elementer og skifte mellem dem baseret på deres position i dokumentet (DOM-træet), tjek demoen for at se, hvad jeg mener. Derudover kan du ændre deres farve på farten ved blot at tilføje data-midnat attribut med det angivne farve navn.

Afhængighed: jQuery
Licens: MIT licens

7. ScrollMagic

ScrollMagic har avancerede funktioner til at tilføje interaktion under en siderulle. Du kan knytte elementer fra specifikke rullepositioner, tilføje animation baseret på rulleposition eller endda lave en fantastisk parallax-effekt. Demoen giver dig nogle indblik i, hvad denne plugin kan gøre.

Afhængighed: jQuery / Velocity.js
Licens: Dual License (MIT og GPL)

8. onScreen

på skærmen ligner waypoints - det giver dig mulighed for at udføre funktioner, da elementet går ind, forlader eller når bestemte positioner i browservisionsporten.

Afhængighed: jQuery
Licens: MIT licens

9. jQuery Pin

jQuery Pin er en lille jQuery plugin til “pin” eller “frigøre” elementer til en position, når du rulle på siden. Min mest foretrukne del af dette plugin er muligheden for at deaktivere den ved visse visningsbredder.

Afhængighed: jQuery
Licens: BSD licens

10. Sticky Float

Sticky Float tillader os at give elementer en fast position, der er i forhold til dens forælder. Du kan indstille den klæbende indstilling efter dine behov med de angivne parametre og ved at ændre værdien. Fang demoen her.

Afhængighed: jQuery
Licens: Udefineret

11. Zebra Pin

Zebra Pin er et let plugin til at gøre ethvert element pin til deres beholder. Med dette plugin kan du tilføje “klæbrig-ness” til elementer i dit projekt som din navigation, sidebjælker, overskrifter og sidefødder eller andre elementer, som du vil holde synlige, når brugerne ruller ned. Tjek demoen.

Afhængighed: jQuery
Licens: GPL licens

12. HC-Sticky

Med HC-Sticky, Du kan lave klæbende elementer, der refererer til dens container, til et hvilket som helst element, eller til selve dokumentet. Dette plugin har nogle muligheder, som du kan tilpasse til dit behov, som afstand fra toppen og bunden for at starte flydende og andre muligheder.

Afhængighed: jQuery
Licens: MIT licens

13. Sticky Mojo

Sticky Mojo er et let, hurtigt og fleksibelt jQuery-plugin til at gøre fantastiske klæbrig elementer. Den er kompatibel med moderne browsere og vil nedbrydes graciøst i IE.

Afhængighed: jQuery
Licens: MIT licens

14. Sticky Navbar

Hvis du vil lave enkeltnavigering, der stikker, når man ruller ned, er dette bibliotek til dig.Sticky Navbar vil sætte navigationen øverst i browservinduet og markere ankerlinket for at forbinde til det tilsvarende afsnit på din side. Du kan også tilføje Animate.css for at forskønne navigationseffekten.

Afhængighed: jQuery
Licens: MIT licens

15. StickyStack

StickyStack vil gøre elementer stakke med en anden, når brugerne rulle elementet og nå toppen af visningsporten. Med dette bibliotek bliver din lange side omdannet til stablede kort.

Afhængighed: jQuery
Licens: Udefineret