Comment ajouter et supprimer correctement des classes jQuery basées sur le défilement vertical ?

Ajouter et supprimer une classe jQuery basée sur le défilement vertical

Dans ce scénario, l'utilisateur souhaite supprimer la classe "clearHeader" du " header" et remplacez-le par la classe "darkHeader" au fur et à mesure que l'utilisateur fait défiler vers le bas, modifiant ainsi son apparence. Cependant, le code fourni ne fonctionne pas correctement.

Analysons le code original :

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

Mis à part quelques ajustements mineurs, il y a deux problèmes importants :

• Opérateur incorrect : L'opérateur de comparaison doit être ">=" au lieu de "<=" pour identifier correctement quand modifier la classe.
• Erreur du sélecteur : Le sélecteur ".clearheader" est incorrect car il contient un "H" minuscule. Le sélecteur correct doit être ".clearHeader."

Voici le code révisé corrigeant ces erreurs :

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

De plus, il est recommandé de ne pas supprimer la classe "clearHeader" car elle est responsable de la fixation de l'en-tête. Au lieu de cela, appliquez une nouvelle classe CSS pour modifier le style.

De plus, si vous avez l'intention de restaurer la classe "clearHeader" lorsque l'utilisateur fait défiler vers le haut, implémentez ce code :

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

Pour améliorer les performances et éviter d'interroger le DOM à plusieurs reprises, pensez à mettre en cache le sélecteur d'en-tête :

$(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');
        }
    });
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!