Comment créer une barre de navigation collante qui se fixe en haut lors du défilement ?

Création d'une barre de navigation collante qui s'attache en haut lors du défilement

Problème :

Concevoir une barre de navigation positionnée en bas de la page visible initialement. Lorsqu'un utilisateur fait défiler vers le bas, la barre de navigation monte jusqu'à ce qu'elle se fixe en haut de la page.

Solution :

La solution consiste à utiliser jQuery et JavaScript pour modifier la position de la barre de navigation en fonction de la position de défilement.

Implémentation :

1. HTML :

   <div>

2. CSS :

   #banner {
     height: 273px;
   }
   
   #nav_bar {
     height: 30px;
   }
   
   $(document).ready(function() {
     $(window).scroll(function () {
       if ($(window).scrollTop() > 550) {
         $('#nav_bar').addClass('navbar-fixed-top');
       }
       if ($(window).scrollTop() < 551) {
         $('#nav_bar').removeClass('navbar-fixed-top');
       }
     });
   });

Remarques supplémentaires :

• Ajustez les valeurs dans JavaScript (550 et 551) pour qu'elles correspondent à la position de défilement exacte où le la barre de navigation devrait être corrigée.
• Cette solution peut être appliquée à d'autres éléments qui doivent rester fixes à une position de défilement spécifique.

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!