Schneller Tipp Sticky Navigation, ohne den unbeholfenen Sprung

„Sticky Navigation“ beschreibt eine Navigationsleiste, die anscheinend am oberen Rand der Seite hängen bleibt, sobald ein Benutzer mit dem Scrollen beginnt. Heutzutage wird dieser Ansatz häufig verwendet, da er Benutzern jederzeit Zugriff auf die Seitennavigation gibt und das Branding der Website jederzeit fest im Blickfeld bleibt.

Wenn jedoch eine Navigationsleiste klebrig wird, wird die Tatsache nicht berücksichtigt, dass sie aus dem Dokumentenfluss entfernt wird. Dies führt zu einem unangenehmen Sprung, wenn der Seiteninhalt nach oben verschoben wird. Heute verwenden wir jQuery, um unsere eigene Sticky-Navigation zu implementieren. Anschließend verwenden wir mit dem Waypoints.js-Plugin einen alternativen Ansatz, um uns den nahtlosen Effekt zu geben, nach dem wir suchen.

Wichtige JS-Bibliotheken für Webdesign

Folgen Sie mir in meinem neuen Kurs zu Tuts +, während ich durch 15 JavaScript-Bibliotheken gehe, einschließlich Waypoint.js, die jede mit klaren Beispielen und Übungen demonstrieren. 

Während des gesamten Kurses werden wir jedes Paket zusammen mit Bower installieren und warten. So können Sie den Sound-Workflow besser üben und Ihnen zusätzliche Fähigkeiten für den Gürtel Ihres Webdesign-Tools vermitteln!

Weitere Ressourcen

  • Wichtige JS-Bibliotheken für Webdesign auf Tuts+
  • 30 Tage zum Lernen von jQuery auf Tuts+
  • Bower: ein Paketmanager für das Web
  • Pro-Frontend-Workflows: Yeoman bei Tuts+
  • jQuery-Wegpunkte