Wie kann ich mit jQuery CSS-Klassen basierend auf der vertikalen Bildlaufposition hinzufügen und entfernen?

Klasse mit jQuery basierend auf vertikalem Scrollen hinzufügen/entfernen

In diesem Fall besteht das Ziel darin, die Klasse aus dem „Header“ zu entfernen. Element, sobald der Benutzer eine bestimmte Distanz nach unten scrollt, und wenden Sie dann eine andere Klasse an, um sein Erscheinungsbild zu ändern. Allerdings funktioniert der bereitgestellte Code aufgrund einiger kleinerer Fehler nicht wie vorgesehen.

Der korrigierte Code lautet wie folgt:

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

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

Es gab drei Hauptprobleme:

1. Der Vergleichsoperator war falsch; es sollte >= sein, um zu überprüfen, ob die Bildlaufposition größer oder gleich 500 ist.
2. Der zu entfernende Klassenname wurde falsch als „clearheader“ statt „clearHeader“ geschrieben.
3. Das ; fehlte am Ende der Funktionsdeklaration.

Zusätzlich zur Behebung dieser Fehler sollten Sie Folgendes beachten:

• Anstatt die Klasse „clearHeader“ zu entfernen, ist es besser, sie hinzuzufügen die DarkHeader-Klasse dazu. Dadurch bleibt die Position der Kopfzeile erhalten, während ihr Erscheinungsbild geändert wird.
• Um die Klasse beim Zurückscrollen zurückzusetzen, verwenden Sie eine zweite Bedingung wie unten gezeigt:

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

Abschließend das Caching Das jQuery-Objekt für den Header kann die Leistung verbessern, insbesondere wenn Sie planen, seine Klasse mehrmals zu ändern:

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

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

Indem Sie diese Probleme beheben, können Sie dies tun Fügen Sie jetzt effektiv Klassen zur Kopfzeile hinzu und entfernen Sie sie daraus, basierend auf der vertikalen Bildlaufposition des Benutzers.

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery CSS-Klassen basierend auf der vertikalen Bildlaufposition hinzufügen und entfernen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!