Comment changer la couleur d'arrière-plan de la barre de navigation lors du défilement ?

Modification de la couleur de la barre de navigation après le défilement

Question :

Comment pouvez-vous supprimer l'arrière-plan couleur d'une barre de navigation initialement, puis ajoutez une nouvelle couleur une fois le défilement se produit ?

Scénario :

Le site Web en question, https://attafothman.olympe.in/, comporte une barre de navigation noire en haut qui devrait maintenir un position. Cependant, lorsque vous faites défiler vers le bas en dessous d'un certain div, la barre de navigation acquiert automatiquement une nouvelle couleur d'arrière-plan.

Solution :

Pour résoudre ce problème, une combinaison de JavaScript et CSS est employé.

JavaScript :

$(function () {
  $(document).scroll(function () {
    var $nav = $(".navbar-fixed-top");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});

Ce code JavaScript déclenche un écouteur d'événement lors du défilement. Lorsque la position de défilement dépasse la hauteur de la barre de navigation, il ajoute une classe CSS personnalisée nommée « scrolled » à l'élément.

CSS :

.navbar-fixed-top.scrolled {
  background-color: #fff !important;
  transition: background-color 200ms linear;
}

Ce CSS La règle définit le comportement de la classe « défilée ». Il attribue une couleur d'arrière-plan blanche unie à l'élément avec la classe 'navbar-fixed-top' une fois la classe 'scrolled' ajoutée. Le mot-clé '!important' garantit que cette règle remplace tout style conflictuel.

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!