Wie kann ich mit Bootstrap 3.0 eine Sticky-Navigationsleiste erstellen?

Erstellen einer Sticky-Navigationsleiste mit Bootstrap

Wenn eine Website geladen wird, bevorzugen Benutzer häufig, dass Navigationsleisten konsistent oben auf der Seite angezeigt werden . Während der Benutzer nach unten scrollt, sollte die Navigationsleiste nach oben scrollen und schließlich am oberen Bildschirmrand fixiert werden. Dieser Leitfaden zeigt, wie Sie dies mit Bootstrap 3.0 erreichen.

Lösung mit JQuery und JavaScript:

<div> <h2>put what you möchte hier</h2><br> <p>passen Sie einfach die Javascript-Größe entsprechend an window</p><br></div></p>
<p><nav><pre class="brush:php;toolbar:false"><ul>

html, body {<br> height: 4000px;<br>}</p>
<p>.navbar -fixed {<br> top: 0;<br> z-index: 100;<br> Position: fest;<br> Breite: 100 %;<br>}</p>
<h1>body_div {</h1>
<p>top: 0;<br> Position: relativ;<br> Höhe : 200px;<br> Hintergrundfarbe: grün;<br>}</p>
<h1>Banner {</h1>
<p>Breite: 100 %;<br> Höhe: 273px;<br> Hintergrundfarbe: grau;<br> Überlauf: versteckt;<br>}</p>
<h1>nav_bar {</h1>
<p>border: 0;<br>Hintergrundfarbe: #202020;<br>Rahmenradius: 0px;<br>Rand unten: 0;<br>Höhe: 30px;<br>}</p>
<p>//the Die folgenden CSS sind für die Links, nicht erforderlich für 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> Polsterung: 0 15,5 Pixel;<br> Farbe: #3498db;<br> text-decoration: none;<br>}<br>

$(document).ready(function() {<br> // Ändern Sie die Ganzzahlen unten so, dass sie mit der Höhe Ihres oberen Div übereinstimmen, das ich <br> //banner genannt habe.  Fügen Sie einfach eine 1 zur letzten Zahl hinzu.  console.log($(window).scrollTop())<br> //um herauszufinden, wo die Bildlaufposition genau ist, wenn Sie die Navigation<br> //bar oder div oder was auch immer korrigieren möchten.  Ich habe das console.log für Sie gespeichert.  Einfach entfernen, wenn<br> //Sie die Position kennen.<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>
Diese Lösung verwendet JavaScript, um die Klasse „navbar-fixed-top“ basierend auf der Bildlaufposition zur Navigationsleiste hinzuzufügen und daraus zu entfernen. Die genaue Scrollposition, an der die Navigationsleiste fixiert wird, kann durch Ändern der Werte im JavaScript-Code angepasst werden.

Das obige ist der detaillierte Inhalt vonWie kann ich mit Bootstrap 3.0 eine Sticky-Navigationsleiste erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!