add/entfernen Sie die Klasse mit jQuery basierend auf vertikalem Scroll

In dieser Instanz werden das Ziel der Klasse "Header" entfernen, sobald das Benutzer eine bestimmte Entfernung entfernen und eine andere Klasse anwenden, um das Auftritt zu ändern. Der bereitgestellte Code funktioniert jedoch nicht wie ein paar geringfügige Fehler beabsichtigt.

Der korrigierte Code lautet wie folgt:

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

    // >=, not = 500) {
        // clearHeader, not clearheader - caps H
        $(".clearHeader").addClass("darkHeader");
    }
});

Es gab drei Hauptprobleme:

1. Der Vergleichsoperator war falsch; Es sollte> = prüfen, ob die Bildlaufposition größer oder gleich 500 ist.
2. Der Klassenname für die Entfernung wurde als Clearheader anstelle von Clearheader falsch geschrieben.
3. the; Fehlte am Ende der Funktionserklärung.

Zusätzlich zur Behebung dieser Fehler sollten Sie Folgendes in Betracht ziehen:

• anstatt die ClearHeader -Klasse zu entfernen, ist es besser, die Darkheader -Klasse zu dem hinzuzufügen. Dadurch wird die Position des Headers bewahrt, während sein Erscheinungsbild geändert wird.
• , um die Klasse beim Zurück Scrollen zurückzusetzen, verwenden $ (". ClearHeader"). AddClass ("Darkheader"); } anders { $ (". ClearHeader"). removeclass ("darkheader"); }

Schließlich kann das zwischenstrichene JQuery -Objekt für den Header die Leistung verbessern, insbesondere wenn Sie planen, seine Klasse mehrmals zu ändern:

if (scroll >= 500) {
    $(".clearHeader").addClass("darkHeader");
} else {
    $(".clearHeader").removeClass("darkHeader");
}

var header = $ (". Clearheader"); $ (Fenster) .Scroll (function () { var scroll = $ (Fenster) .Scrolltop (); if (scrollen> = 500) { Header.removeclass ('ClearHeader'). AddClass ("Darkheader"); } anders { Header.removeclass ("Darkheader"). AddClass ('ClearHeader'); } });

Wenn Sie diese Probleme angehen, können Sie jetzt Klassen aus dem Header basierend auf der vertikalen Bildlaufposition des Benutzers effektiv hinzufügen und entfernen.