Comment puis-je créer une barre de navigation collante à l'aide de Bootstrap 3.0 ?

Création d'une barre de navigation collante à l'aide de Bootstrap

Lors du chargement d'un site Web, les utilisateurs préfèrent souvent que les barres de navigation apparaissent de manière cohérente en haut de la page . Au fur et à mesure que l'utilisateur fait défiler vers le bas, la barre de navigation doit défiler vers le haut et éventuellement se fixer en haut de l'écran. Ce guide montre comment y parvenir à l'aide de Bootstrap 3.0.

Solution utilisant JQuery et JavaScript :

<div> <h2>mettez ce que vous voulez ici</h2><br> <p> ajustez simplement la taille du javascript pour qu'elle corresponde à cela fenêtre</p><br></div></p>
<p><nav><pre class="brush:php;toolbar:false"><ul>

html, corps {<br> hauteur : 4000px;<br>}</p>
<p>.navbar -fixe {<br> top : 0 ;<br> z-index : 100;<br> position : fixe;<br> largeur : 100%;<br>}</p>
<h1>body_div {</h1>
<p>haut : 0;<br> position : relative;<br> hauteur : 200px;<br> couleur d'arrière-plan : vert;<br>}</p>
<h1>bannière {</h1>
<p>largeur : 100 %;<br> hauteur : 273px;<br>couleur de fond : gris;<br>débordement : caché;<br>}</p>
<h1>nav_bar {</h1>
<p>bordure : 0;<br> couleur d'arrière-plan : #202020 ;<br> border-radius : 0px;<br> margin-bottom : 0;<br> hauteur : 30px;<br>}</p>
<p>//le les CSS ci-dessous sont pour les liens, pas nécessaires pour Sticky Nav<br>.nav_links {<br> margin : 0;<br>}</p>
<p>.nav_links li {<br> display : inline-block;<br> margin-top : 4px;<br>}</p>
<p>.nav_links li a {<br> remplissage : 0 15,5px ;<br> couleur : #3498db;<br> décoration de texte : aucune;<br>}<br>

$(document).ready(function() {<br> // changez les entiers ci-dessous pour qu'ils correspondent à la hauteur de votre div supérieur, que j'ai appelé<br> //banner.  Ajoutez simplement un 1 au dernier chiffre.  console.log($(window).scrollTop())<br> //pour déterminer quelle est la position de défilement quand exactement vous voulez corriger le nav<br> //bar ou div ou autre.  Je suis resté dans le console.log pour vous.  Supprimez simplement quand<br> //vous connaissez la position.<br> $(window).scroll(function () {</p>
<pre class="brush:php;toolbar:false">console.log($(window).scrollTop());

if ($(window).scrollTop() > 550) {
  $('#nav_bar').addClass('navbar-fixed-top');
}

if ($(window).scrollTop() < 551) {
  $('#nav_bar').removeClass('navbar-fixed-top');
}

});
});
< /pre>
Cette solution utilise JavaScript pour ajouter et supprimer la classe navbar-fixed-top de la barre de navigation en fonction de la position de défilement. La position exacte de défilement où la barre de navigation devient fixe peut être ajustée en modifiant les valeurs dans le code JavaScript.

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!