Comment puis-je utiliser jQuery pour ajouter et supprimer des classes CSS en fonction de la position de défilement vertical ?

Ajouter/Supprimer une classe avec jQuery basé sur le défilement vertical

Dans ce cas, l'objectif est de supprimer la classe de "l'en-tête" élément une fois que l'utilisateur fait défiler une certaine distance, puis applique une classe différente pour modifier son apparence. Cependant, le code fourni ne fonctionne pas comme prévu en raison de quelques erreurs mineures.

Le code corrigé est le suivant :

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

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

Il y avait trois problèmes principaux :

1. L'opérateur de comparaison était incorrect ; il devrait être >= pour vérifier si la position de défilement est supérieure ou égale à 500.
2. Le nom de la classe à supprimer a été mal orthographié comme clearheader au lieu de clearHeader.
3. Le ; manquait à la fin de la déclaration de la fonction.

En plus de corriger ces erreurs, considérez ce qui suit :

• Au lieu de supprimer la classe clearHeader, il est préférable d'ajouter la classe darkHeader. Cela préserve la position de l'en-tête tout en modifiant son apparence.
• Pour réinitialiser la classe lors du défilement vers le haut, utilisez une deuxième condition comme indiqué ci-dessous :

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

Enfin, la mise en cache l'objet jQuery pour l'en-tête peut améliorer les performances, surtout si vous prévoyez de modifier sa classe plusieurs fois :

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

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

En résolvant ces problèmes, vous peut désormais ajouter et supprimer efficacement des classes de l'en-tête en fonction de la position de défilement vertical de l'utilisateur.

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!