Comment créer une barre de navigation défilante qui colle vers le haut ?

Créer une barre de navigation défilante qui colle au haut

Barre de navigation collante

Vous souhaitez créer une barre de navigation qui apparaît initialement à le bas de la page. Au fur et à mesure que vous faites défiler vers le bas, la barre se déplace jusqu'à ce qu'elle atteigne le haut de la page et y reste. Ceci est réalisé en utilisant respectivement les classes navbar-fixed-bottom et navbar-fixed-top.

Résoudre votre problème de code

L'examen de votre code fourni révèle ce qui suit :

• Utilisation correcte de la classe supérieure fixe de la barre de navigation
• Ombre appropriée suppression

Cependant, pour que la barre se comporte comme vous le souhaitez, vous devez :

• Ajuster le placement du <div> pour qu'il apparaisse initialement en bas de la page
• Ajoutez une grande marge en haut ou en bas au <div> pour le pousser vers le bas

Considérez ce qui suit code modifié :

HTML raffiné

<div>

CSS modifié

.navbar-fixed-top {
    top: 0;
    z-index: 100;
    position: fixed;
    width: 100%;
    margin-top: 800px; /* Add a sufficient margin-top to adjust the navigation bar's initial position */
}

Solution alternative

Si le comportement de la barre de navigation intégrée de Bootstrap n'est pas si vous le souhaitez, vous pouvez passer à une implémentation jQuery ou JavaScript plus simple :

HTML Code

   <div>

Code CSS

/* Initially, the nav bar is absolute, positioned at the bottom */
#nav_bar {
    position: absolute;
    bottom: 0;
}

/* When the #content is scrolled 40px, the navbar changes to fixed */
#content {
    height: 3000px;  /* Increase this to match your page content length */
    scroll: auto;
}

@media screen and (max-width: 480px) {
    #content {
        height: 8000px;
    }
}

/* This makes the navbar fixed positioned at the top, until the content is fully scrolled */
.fixed-nav {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
}

Code JavaScript

$(window).scroll(function(){
    if ($(window).scrollTop() > 40) {
        $("#nav_bar").addClass("fixed-nav");
     } else {
         $("#nav_bar").removeClass("fixed-nav");
     }
 });
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!