Comment puis-je modifier dynamiquement la classe d'un en-tête en fonction de la position de défilement vertical à l'aide de jQuery ?

Manipulation de classe basée sur JQuery avec défilement vertical

Problème :

Vous souhaitez modifier la classe d'un élément d'en-tête lorsqu'un utilisateur fait défiler, modifiant son apparence. Cependant, votre approche actuelle ne fonctionne pas comme prévu.

Solution :

<br>$(window).scroll(function() {</p>
<pre class="brush:php;toolbar:false">var scroll = $(window).scrollTop();

// Update using correct operator (>=, not <=)
if (scroll >= 500) {
    // Use correct class name (clearHeader, not clearheader)
    $(".clearHeader").addClass("darkHeader");
}

});

Syntaxe correcte :

Assurer l'utilisation correcte du > = L'opérateur et le nom de la classe clearHeader sont cruciaux. De plus, ne supprimez pas la classe clearHeader, car elle supprime le positionnement fixe et sa capacité à être à nouveau sélectionnée.

Réinitialisation des classes :

Pour réinitialiser la modification de la classe lorsque en faisant défiler vers le haut, utilisez ce code :

<br>$(window).scroll(function() {</p>
<pre class="brush:php;toolbar:false">var scroll = $(window).scrollTop();

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

});

Optimisation des performances :

Pour une meilleure efficacité, mettez en cache l'objet jQuery de l'en-tête :

<br>$(function() {</p>
<pre class="brush:php;toolbar:false">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!