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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul>

Copier après la connexion

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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');
}

Copier après la connexion