15 jQuery-plug-ins om slimme, sticky elementen te maken

Het is nu gebruikelijk om bepaalde elementen in een site op een positie vast te stellen wanneer u omhoog of omlaag scrolt op de site, bijvoorbeeld het navigatiemenu, de kop of de zijbalk. Dit zorgt ervoor dat het element direct beschikbaar is, ongeacht de positie van de gebruiker.

Een plakkerig element genoemd, dit kan worden bereikt door alleen CSS te gebruiken, maar met deze methode is het effect niet betrouwbaar in meerdere browsers. Daarom hebben we een handvol JS-bibliotheken en jQuery-plug-ins samengesteld waarmee u dit specifieke UX-ontwerp met weinig tot geen gedoe kunt bereiken..

1. Waypoints

Waypoints is een bibliotheek om een functie uit te voeren op basis van de positie van het element in het kijkvenster. Het wordt geleverd met een snelkoppelingsfunctie die dat element maakt “kleverig”. U kunt de schuifrichting aanpassen - omhoog, naar beneden, en zelfs rechts en links - over welk element in de viewport moet blijven.

Afhankelijkheid: Geen / jQuery (optioneel)
Licentie: MIT-licentie

2. Kleverige kit

Met StickyKit, je kunt niet alleen een element in het venster plakken, maar je kunt ze ook laten plakken in het bovenliggende element dat je aan meerdere elementen tegelijk toewijst. De plug-in wordt ook geleverd met enkele geavanceerde instellingen, waaronder aangepaste gebeurtenissen en triggers.

Afhankelijkheid: jQuery
Licentie: WTFPL

3. StickyJS

StickyJS is een eenvoudig te gebruiken jQuery-plug-in die doet wat hij zegt. De plug-in werkt vanuit de doos. Maar als je wat aanpassingen nodig hebt, wordt het geleverd met Opties / Instellingen, Aangepaste Methoden en Gebeurtenissen.

Afhankelijkheid: jQuery
Licentie: MIT-licentie

4. Hoofdruimte

Een plakkerige sitekop neemt waardevolle verticale ruimte in beslag die een verschil maakt wanneer u de site op mobiel bekijkt. Hoofdkamer is een JavaScript-bibliotheek die je kleverige kop slim maakt; de koptekst wordt verborgen wanneer gebruikers naar beneden scrollen en verschijnen bij het omhoog scrollen.

Afhankelijkheid: Geen / jQuery (optioneel) / Angular (optioneel)
Licentie: MIT-licentie

5. MakefixedJS

Makefixed kunt u elementen dynamisch laten herstellen terwijl gebruikers door de pagina scrollen. Bel gewoon de makeFixed () functie op het element dat u wilt herstellen. Controleer de demo om deze te zien in actie.

Afhankelijkheid: jQuery
Licentie: GPL

6. MidnightJS

Middernacht kunt u meerdere headers / elementen vasthouden en ertussen schakelen op basis van hun positie in het document (DOM-structuur), bekijk de demo om te zien wat ik bedoel. Bovendien kun je hun kleur veranderen door simpelweg de data-midnight attribuut met de opgegeven kleurnaam.

Afhankelijkheid: jQuery
Licentie: MIT-licentie

7. ScrollMagic

ScrollMagic heeft geavanceerde functies om interactie toe te voegen, tijdens het scrollen van een pagina. U kunt elementen van specifieke schuifposities vastzetten, animaties toevoegen op basis van de schuifpositie of zelfs een geweldig parallax-effect maken. De demo geeft u een aantal inzichten over wat deze plug-in kan doen.

Afhankelijkheid: jQuery / Velocity.js
Licentie: Dual License (MIT en GPL)

8. op het scherm

op het scherm is vergelijkbaar met Waypoints - hiermee kunt u functies uitvoeren wanneer het element binnen het kijkvenster van de browser wordt binnengegaan, weggaat of wordt bereikt.

Afhankelijkheid: jQuery
Licentie: MIT-licentie

9. jQuery Pin

jQuery Pin is een kleine jQuery-invoegtoepassing voor “pin” of “losspelden” elementen naar een positie, wanneer u de pagina schuift. Mijn meest favoriete deel van deze plug-in is de optie om het uit te schakelen in bepaalde viewport-breedtes.

Afhankelijkheid: jQuery
Licentie: BSD-licentie

10. Sticky Float

Sticky Float stelt ons in staat om elementen een vaste positie te geven die relatief is ten opzichte van de ouder. U kunt de sticky-optie volgens uw behoeften instellen met de opgegeven parameters en door de waarde te wijzigen. Vang de demo hier.

Afhankelijkheid: jQuery
Licentie: onbepaald

11. Zebrapin

Zebra Pin is een lichtgewicht plug-in om elk element vast te maken aan de container. Met deze plug-in kunt u toevoegen “sticky-ness” elementen in uw project zoals uw navigatie, zijbalken, kop- en voetteksten, of andere elementen die u zichtbaar wilt houden wanneer gebruikers naar beneden scrollen. Bekijk de demo.

Afhankelijkheid: jQuery
Licentie: GPL-licentie

12. HC-Sticky

Met HC-Sticky, je kunt kleverige elementen maken die verwijzen naar de container, naar een bepaald element of naar het document zelf. Deze plug-in heeft enkele opties die u kunt aanpassen aan uw behoefte, zoals afstand van boven en onder om te zweven en andere opties.

Afhankelijkheid: jQuery
Licentie: MIT-licentie

13. Kleverige Mojo

Sticky Mojo is een lichtgewicht, snelle en flexibele jQuery-plug-in om geweldige plakkerige elementen te maken. Het is compatibel met moderne browsers en zal gracieus verslechteren in IE.

Afhankelijkheid: jQuery
Licentie: MIT-licentie

14. Kleverige navigatiebalk

Als u een navigatie van één pagina wilt maken die blijft staan wanneer u naar beneden scrollt, is deze bibliotheek iets voor u.Kleverige navigatiebalk zal de navigatie boven in het browservenster plaatsen en de ankerkoppeling markeren om verbinding te maken met het overeenkomstige gedeelte op uw pagina. U kunt ook Animate.css toevoegen om het navigatie-effect te verfraaien.

Afhankelijkheid: jQuery
Licentie: MIT-licentie

15. StickyStack

StickyStack maakt elementen met een andere stapel wanneer gebruikers door het element scrollen en de bovenkant van de viewport bereiken. Met deze bibliotheek verandert je lange pagina in gestapelde kaarten.

Afhankelijkheid: jQuery
Licentie: onbepaald