15 jQuery-plugins för att göra smarta klibbiga element

Det är nu vanligt att se vissa delar på en webbplats som är fasta till en position när du bläddrar upp eller ner på sidan, t.ex. navigationsmenyn, rubriken eller sidofältet. Detta gör att elementet är lätt tillgängligt oavsett användarens position.

Kallas ett klibbigt element, detta kan uppnås bara genom att använda CSS, men med denna metod är effekten inte pålitlig över flera webbläsare. Det är därför vi har satt ihop en handfull JS-bibliotek och jQuery-plugins som gör det möjligt för dig att uppnå denna UX-design med liten eller ingen krångel.

1. Waypoints

Waypoints är ett bibliotek för att utföra en funktion baserad på elementpositionen i visningsporten. Den levereras med en genvägsfunktion som gör det här elementet “klibbig”. Du kan anpassa rullningsriktningen - upp, ner, och även höger och vänster - om vilket elementet ska ligga inom visningsporten.

• Dependency: Ingen / jQuery (valfritt)
• Licens: MIT-licens

2. Sticky Kit

Med StickyKit, inte bara kan du skapa en elementsticka inom visningsporten, men du kan också få dem att hålla sig i moderelementet du anger för flera element samtidigt. Pluggen kommer också med några avancerade inställningar, inklusive anpassade händelser och utlösare.

• Dependency: jQuery
• Licens: WTFPL

3. StickyJS

StickyJS är ett lättanvänt jQuery klibbigt plugin som gör vad det säger. Pluggen fungerar ur lådan. Men om du behöver lite anpassning kommer det med alternativ / inställningar, anpassade metoder och händelser.

• Dependency: jQuery
• Licens: MIT-licens

4. HeadRoom

En kladdig webbplatshuvud tar upp värdefullt vertikalutrymme som gör skillnad när du tittar på webbplatsen på mobilen. Fri höjd är ett JavaScript-bibliotek som gör din klibbiga rubrik smart; rubriken kommer att döljas när användarna bläddrar ner sidan och visas när de bläddrar.

• Dependency: Ingen / jQuery (valfritt) / Vinkel (valfritt)
• Licens: MIT-licens

5. MakefixedJS

Makefixed låter dig göra elementen fixade dynamiskt när användare bläddrar på sidan. Ring bara till makeFixed () funktion på det element du vill fixa. Kontrollera demoen för att se den på åtgärd.

• Dependency: jQuery
• Licens: GPL

6. MidnightJS

Midnatt kan du hålla flera rubriker / element och växla mellan dem baserat på deras position i dokumentet (DOM-trädet), kolla in demo för att se vad jag menar. Dessutom kan du ändra sin färg på flygningen genom att helt enkelt lägga till data midnatt attribut med det angivna färgnamnet.

• Dependency: jQuery
• Licens: MIT-licens

7. ScrollMagic

ScrollMagic har avancerade funktioner för att lägga till interaktion under en sidrullning. Du kan stifta element från specifika rullningspositioner, lägga till animering baserat på rullningsläge eller till och med göra en fantastisk parallaxeffekt. Demon ger dig några insikter om vad det här pluginet kan göra.

• Dependency: jQuery / Velocity.js
• Licens: Dual License (MIT och GPL)

8. på skärmen

på skärm liknar waypoints - det låter dig utföra funktioner som elementet går in, lämnar eller når vissa positioner i webbläsarens visningsport.

• Dependency: jQuery
• Licens: MIT-licens

9. jQuery Pin

jQuery Pin är ett litet jQuery-plugin till “stift” eller “unpin” element till en position när du bläddrar på sidan. Min mest favoritdel av det här pluginet är möjligheten att inaktivera den vid vissa visningsbredder.

• Dependency: jQuery
• Licens: BSD-licens

10. Sticky Float

Sticky Float tillåter oss att ge element ett fast läge som är relativt sitt förälder. Du kan ställa in det klibbiga alternativet enligt dina behov med de angivna parametrarna och genom att ändra värdet. Fånga demoen här.

• Dependency: jQuery
• Licens: Odefinierad

11. Zebra Pin

Zebra Pin är en lätt plugin för att göra något element stift till sin behållare. Med det här pluginet kan du lägga till “klibbig-ness” till element i ditt projekt som till din navigering, sidofält, rubriker och sidfot, eller andra element som du vill hålla synliga när användarna bläddrar ner. Kolla in demoen.

• Dependency: jQuery
• Licens: GPL-licens

12. HC-Sticky

Med HC-Klibbig, Du kan göra klibbiga element som hänvisar till dess behållare, till ett visst element eller till själva dokumentet. Det här pluginet har några alternativ som du kan anpassa till ditt behov, som avstånd från toppen och botten för att börja flyta och andra alternativ.

• Dependency: jQuery
• Licens: MIT-licens

13. Sticky Mojo

Sticky Mojo är ett lätt, snabbt och flexibelt jQuery-plugin för att göra fantastiska klibbiga element. Den är kompatibel med moderna webbläsare och kommer att försämras graciöst i IE.

• Dependency: jQuery
• Licens: MIT-licens

14. Sticky Navbar

Om du vill göra enkel sidnavigering som sticks när man rullar ner, är det här biblioteket för dig.Sticky Navbar lägger navigeringen längst upp i webbläsarfönstret och markerar ankarlänken för att ansluta till motsvarande avsnitt på din sida. Du kan också lägga till Animate.css för att försköna navigationseffekten.

• Dependency: jQuery
• Licens: MIT-licens

15. StickyStack

StickyStack kommer att göra element stapla med en annan när användarna bläddrar elementet och når toppen av visningsporten. Med detta bibliotek omvandlas din långsida till staplade kort.

• Dependency: jQuery
• Licens: Odefinierad