Gelöst: onscroll Klasse jquery hinzufügen

ui.widget.ScrollTo

Das Hauptproblem bei der Verwendung des ScrollTo-Widgets besteht darin, dass es schwierig sein kann, zu steuern, wohin sich der Cursor des Benutzers bewegt, wenn er auf das Widget klickt. Dies kann es schwierig machen, eine einfach zu verwendende Benutzeroberfläche zu erstellen.

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    //>=, not <=
    if (scroll >= 100) {
        //clearHeader, not clearheader - caps H
        $("#header").addClass("scrolled");
    } else {
        $("#header").removeClass("scrolled");  
    }  }); //missing );

Dieser Code ist in jQuery geschrieben und wird verwendet, um die CSS-Klasse eines Elements zu ändern, wenn der Benutzer die Seite nach unten scrollt.

Die erste Zeile erstellt eine Funktion, die ausgeführt wird, wenn der Benutzer scrollt. Die zweite Zeile speichert den Wert, wie weit der Benutzer auf der Seite nach unten gescrollt hat, in einer Variablen namens „scroll“. Die dritte Zeile besagt, dass, wenn der Wert von „scroll“ größer oder gleich 100 ist, die CSS-Klasse des Elements mit der ID „header“ in „scrolled“ geändert werden soll. Wenn nicht, dann sollte es wieder in seine ursprüngliche Klasse geändert werden.

Import

jQuery bietet eine bequeme Möglichkeit, andere JavaScript-Dateien in Ihr Projekt zu importieren. Verwenden Sie dazu die Funktion import() von jQuery. Um beispielsweise die Datei myfile.js in Ihr Projekt zu importieren, würden Sie den folgenden Code verwenden:

importiere { myFile } aus './myfile.js';

Dadurch wird myfile.js automatisch in Ihren aktuellen Projektumfang aufgenommen und für die Verwendung in Ihrem Code verfügbar gemacht.

Entwicklertools

Es gibt eine Reihe von Entwicklertools, die in jQuery verfügbar sind. Diese Tools können zum Debuggen von Code, Untersuchen und Ändern von DOM-Elementen und mehr verwendet werden.

Zusammenhängende Posts:

Hinterlasse einen Kommentar