Скачать или смотреть Wie man jQuery-Code in Plain JavaScript für die HTML Affix Funktionalität umwandelt

Erfahren Sie, wie Sie jQuery-Code, der Navigationsmenüs beim Scrollen fixiert, effizient in reines JavaScript konvertieren, um Ihren Code sauberer und schneller zu machen.
---
Dieses Video basiert auf der Frage https://stackoverflow.com/q/62295351/ gestellt von dem Nutzer 'Ran Delos Santos' ( https://stackoverflow.com/u/13464381/ ) sowie auf der Antwort https://stackoverflow.com/a/62295559/ bereitgestellt von dem Nutzer 'Kyle Wetton' ( https://stackoverflow.com/u/12423899/ ) auf der Website 'Stack Overflow'. Vielen Dank an diese großartigen Nutzer und die Stackexchange-Community für ihre Beiträge.

Besuchen Sie diese Links, um den Originalinhalt und weitere Details zu sehen, z. B. alternative Lösungen, aktuelle Entwicklungen zum Thema, Kommentare, Versionsverlauf usw. Der ursprüngliche Titel der Frage lautete beispielsweise: How to convert this jQuery code to plain Javascript (HTML Affix)?

Außerdem steht der Inhalt (außer Musik) unter der Lizenz CC BY-SA https://meta.stackexchange.com/help/l...
Der ursprüngliche Fragenbeitrag steht unter der Lizenz 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ), und der ursprüngliche Antwortbeitrag steht unter der Lizenz 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ).

Falls Ihnen irgendetwas auffällt oder Unstimmigkeiten bestehen, schreiben Sie mir bitte an vlogize [AT] gmail [DOT] com.
---
jQuery zu Plain JavaScript für die HTML Affix Funktionalität konvertieren

In der Welt der Webentwicklung war jQuery lange Zeit eine beliebte Bibliothek zur Manipulation des DOM und zur Ereignisverwaltung. Mit der Weiterentwicklung von JavaScript selbst stellen viele Entwickler jedoch fest, dass sie dieselbe Funktionalität mit saubererem und schnellerem Code erreichen können. Ein Beispiel dafür ist die Implementierung einer affix-Funktion für ein Navigationsmenü, das beim Herunterscrollen an einer festen Position bleibt. Dieser Beitrag zeigt Ihnen, wie Sie einen Beispielcode in jQuery in reines JavaScript umwandeln.

Problem verstehen

Der ursprüngliche jQuery-Code steuert das Verhalten eines Navigationsmenüs beim Scrollen des Benutzers. Konkret wird eine Klasse affix zum Menü hinzugefügt, sobald der Benutzer an dessen ursprüngliche Position auf der Seite scrollt oder darüber hinaus. Diese Funktion ist wichtig für die Benutzerfreundlichkeit, da die Navigation so jederzeit leicht zugänglich bleibt.

Hier eine Aufschlüsselung des jQuery-Codes:

[[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]]

Wichtige Bestandteile des jQuery-Codes

Document Ready: Stellt sicher, dass das DOM vollständig geladen ist, bevor das Skript ausgeführt wird.

Menü-Position: Ermittelt die Position des Menüs auf der Seite mittels .offset().

Scroll-Event: Überwacht die Scrollposition mit $window.scroll() und fügt basierend darauf die Klasse affix hinzu oder entfernt sie.

Die Lösung in Plain JavaScript

Jetzt wandeln wir diese Funktionalität in reines JavaScript um. Der neue Code ist effizienter und reduziert die Abhängigkeit von jQuery, was zu besserer Performance führen kann.

Umgewandelter Code

Hier die neu geschriebene Version in purem JavaScript:

[[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]]

Erklärung des Plain-JavaScript-Codes

Elementauswahl: document.querySelector('.primaryNav') selektiert das Navigationsmenü.

Positionsberechnung: getBoundingClientRect().top liefert die Position relativ zum Viewport; hinzugezählt window.pageYOffset gibt die Position relativ zur Seite an.

Scroll Event Listener: Statt jQuerys Scroll-Funktion wird window.addEventListener('scroll', ...) verwendet, um auf Scroll-Ereignisse zu reagieren.

Klassendefinition: Mit classList.add() und classList.remove() werden CSS-Klassen entsprechend der Scrollposition verwaltet.

Fazit

Der Umstieg von jQuery zu reinem JavaScript kann zwar zunächst herausfordernd erscheinen, ist aber mit klaren Schritten leicht umsetzbar. Die neue JavaScript-Lösung erfüllt nicht nur dieselbe affix-Funktion, sondern tut dies auch effizienter. Auf Ihrem Weg in der Webentwicklung gilt: Die Nutzung von Vanilla JavaScript kann zu schnellerem und besser wartbarem Code führen.

Viel Erfolg beim Programmieren!