15 jQuery-Plug-Ins für intelligente Sticky-Elemente

Es ist jetzt üblich, bestimmte Elemente in einer Site an einer Position fixiert zu sehen, wenn Sie die Site nach oben oder unten scrollen, z. das Navigationsmenü, die Kopfzeile oder die Seitenleiste. Dies ermöglicht, dass das Element unabhängig von der Position des Benutzers leicht verfügbar ist.

Das sogenannte Sticky-Element kann nur durch die Verwendung von CSS erreicht werden. Bei Verwendung dieser Methode ist der Effekt jedoch für mehrere Browser nicht zuverlässig. Aus diesem Grund haben wir eine Handvoll JS-Bibliotheken und jQuery-Plugins zusammengestellt, mit denen Sie dieses spezielle UX-Design mit wenig oder gar keinem Aufwand erreichen können.

1. Wegpunkte

Wegpunkte ist eine Bibliothek zum Ausführen einer Funktion basierend auf der Elementposition im Ansichtsfenster. Es kommt mit einer Abkürzungsfunktion, die dieses Element macht “klebrig”. Sie können die Bildlaufrichtung anpassen - oben, Nieder, und selbst Recht und links - was das Element innerhalb des Viewports halten soll.

• Abhängigkeit: Keine / jQuery (optional)
• Lizenz: MIT-Lizenz

2. Sticky Kit

Mit StickyKit, Sie können nicht nur ein Element innerhalb des Ansichtsfensters anbringen, sondern Sie können auch festlegen, dass das Element innerhalb eines übergeordneten Elements bleibt, das Sie für mehrere Elemente gleichzeitig festlegen. Das Plugin enthält auch einige erweiterte Einstellungen, einschließlich benutzerdefinierter Ereignisse und Trigger.

• Abhängigkeit: jQuery
• Lizenz: WTFPL

3. StickyJS

StickyJS ist ein benutzerfreundliches jQuery-Plug-In, das das macht, was es sagt. Das Plugin funktioniert sofort. Wenn Sie jedoch eine Anpassung benötigen, werden Optionen / Einstellungen, benutzerdefinierte Methoden und Ereignisse mitgeliefert.

• Abhängigkeit: jQuery
• Lizenz: MIT-Lizenz

4. HeadRoom

Ein Sticky-Site-Header nimmt wertvollen vertikalen Platz ein, der einen Unterschied macht, wenn Sie die Site auf dem Handy anzeigen. Kopffreiheit ist eine JavaScript-Bibliothek, die Ihren Sticky-Header intelligent macht. Die Kopfzeile wird ausgeblendet, wenn Benutzer auf der Seite nach unten blättern und nach oben blättern.

• Abhängigkeit: Keine / jQuery (optional) / Winkel (optional)
• Lizenz: MIT-Lizenz

5. MakefixedJS

Makefixiert Mit dieser Option können Sie Elemente dynamisch fixieren, wenn Benutzer die Seite scrollen. Rufen Sie einfach an makeFixed () Funktion auf dem Element, das Sie fixieren möchten. Überprüfen Sie die Demo, um sie auf Aktion zu sehen.

• Abhängigkeit: jQuery
• Lizenz: GPL

6. MidnightJS

Mitternacht können Sie mehrere Kopfzeilen / Elemente anbringen und zwischen ihnen basierend auf ihrer Position innerhalb des Dokuments wechseln (DOM-Baum). Schauen Sie sich die Demo an, um zu sehen, was ich meine. Außerdem können Sie die Farbe im laufenden Betrieb einfach ändern, indem Sie die Option Daten-Mitternacht Attribut mit dem angegebenen Farbnamen.

• Abhängigkeit: jQuery
• Lizenz: MIT-Lizenz

7. ScrollMagic

ScrollMagic verfügt über erweiterte Funktionen zum Hinzufügen von Interaktionen während eines Bildlaufs. Sie können Elemente aus bestimmten Bildlaufpositionen anheften, Animationen basierend auf der Bildlaufposition hinzufügen oder sogar einen beeindruckenden Parallax-Effekt erzeugen. Die Demo gibt Ihnen Einblicke in die Möglichkeiten dieses Plugins.

• Abhängigkeit: jQuery / Velocity.js
• Lizenz: Dual-Lizenz (MIT und GPL)

8. onScreen

auf dem Bildschirm ähnelt Wegpunkten - Sie können Funktionen ausführen, während das Element bestimmte Positionen im Browser-Ansichtsfenster betritt, verlässt oder erreicht.

• Abhängigkeit: jQuery
• Lizenz: MIT-Lizenz

9. jQuery Pin

jQuery Pin ist ein kleines jQuery-Plugin “Stift” oder “unpin” Elemente an eine Position, wenn Sie die Seite scrollen. Mein Lieblingsbestandteil dieses Plugins ist die Option, es bei bestimmten Ansichtsfensterbreiten zu deaktivieren.

• Abhängigkeit: jQuery
• Lizenz: BSD-Lizenz

10. Sticky Float

Sticky Float erlaubt uns, Elementen eine feste Position zu geben, die relativ zu ihrem übergeordneten Element ist. Sie können die Sticky-Option mit den angegebenen Parametern und durch Ändern des Werts Ihren Bedürfnissen entsprechend einstellen. Hier geht es zur Demo.

• Abhängigkeit: jQuery
• Lizenz: Nicht definiert

11. Zebra-Pin

Zebra-Pin ist ein leichtes Plugin, um jedes Element mit dem Container zu verbinden. Mit diesem Plugin können Sie hinzufügen “Klebrigkeit” zu Elementen in Ihrem Projekt wie Ihrer Navigation, Seitenleisten, Kopf- und Fußzeilen oder anderen Elementen, die sichtbar bleiben sollen, wenn Benutzer nach unten scrollen. Schauen Sie sich die Demo an.

• Abhängigkeit: jQuery
• Lizenz: GPL-Lizenz

12. HC-Sticky

Mit HC-Sticky, Sie können klebrige Elemente erstellen, die sich auf den Container, auf ein bestimmtes Element oder auf das Dokument selbst beziehen. Dieses Plugin verfügt über einige Optionen, die Sie an Ihre Bedürfnisse anpassen können, z. B. Abstand von oben und unten, um das Floating zu starten, und andere Optionen.

• Abhängigkeit: jQuery
• Lizenz: MIT-Lizenz

13. Klebriges Mojo

Klebriges Mojo ist ein leichtes, schnelles und flexibles jQuery-Plugin, mit dem Sie erstaunliche klebrige Elemente erstellen können. Es ist mit modernen Browsern kompatibel und wird im IE elegant abgebaut.

• Abhängigkeit: jQuery
• Lizenz: MIT-Lizenz

14. Sticky Navbar

Wenn Sie eine einzelne Seitennavigation erstellen möchten, die beim Scrollen nach unten scrollen soll, ist diese Bibliothek genau das Richtige für Sie.Sticky Navbar setzt die Navigation oben im Browserfenster und markiert den Anker-Link, um eine Verbindung zum entsprechenden Abschnitt auf Ihrer Seite herzustellen. Sie können auch Animate.css hinzufügen, um den Navigationseffekt zu verschönern.

• Abhängigkeit: jQuery
• Lizenz: MIT-Lizenz

15. StickyStack

StickyStack fügt Elemente zusammen, wenn der Benutzer einen Bildlauf durchführt und den oberen Rand des Ansichtsfensters erreicht. Mit dieser Bibliothek verwandelt sich Ihre lange Seite in gestapelte Karten.

• Abhängigkeit: jQuery
• Lizenz: Nicht definiert