Wie füge ich jQuery-Klassen basierend auf vertikalem Scrollen korrekt hinzu und entferne sie?

JQuery-Klasse basierend auf vertikalem Scrollen hinzufügen und entfernen

In diesem Szenario möchte der Benutzer die Klasse „clearHeader“ aus der Klasse „ header“-Element und ersetzen Sie es durch die „darkHeader“-Klasse, während der Benutzer nach unten scrollt, wodurch sich sein Erscheinungsbild ändert. Der bereitgestellte Code funktioniert jedoch nicht ordnungsgemäß.

Lass uns den Originalcode analysieren:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();    
    if (scroll <= 500) {
        $(".clearheader").removeClass("clearHeader").addClass("darkHeader");
    }
}

Abgesehen von ein paar kleineren Anpassungen gibt es zwei wesentliche Probleme:

• Falscher Operator: Der Vergleichsoperator sollte „>=" statt „<=" sein, um korrekt zu identifizieren, wann um die Klasse zu ändern.
• Selektorfehler: Der Selektor „.clearheader“ ist falsch, da er ein kleines „H“ enthält. Der richtige Selektor sollte „.clearHeader“ sein.

Hier ist der überarbeitete Code, der diese Fehler behebt:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 500) {
        $(".clearHeader").removeClass("clearHeader").addClass("darkHeader");
    }
});

Darüber hinaus wird empfohlen, die Klasse „clearHeader“ nicht zu entfernen, da dies der Fall ist verantwortlich für die Fixierung des Headers. Wenden Sie stattdessen eine neue CSS-Klasse an, um den Stil zu ändern.

Wenn Sie außerdem beabsichtigen, die Klasse „clearHeader“ wiederherzustellen, während der Benutzer wieder nach oben scrollt, implementieren Sie diesen Code:

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

Um die Leistung zu verbessern und wiederholte Abfragen des DOM zu vermeiden, sollten Sie den Header-Selektor zwischenspeichern:

$(function() {
    var header = $(".clearHeader");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll >= 500) {
            header.removeClass('clearHeader').addClass("darkHeader");
        } else {
            header.removeClass("darkHeader").addClass('clearHeader');
        }
    });
});

Das obige ist der detaillierte Inhalt vonWie füge ich jQuery-Klassen basierend auf vertikalem Scrollen korrekt hinzu und entferne sie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!