Machen Scrollen NavBar Stick oben auf Browser in Bootstrap

Ich bin neu auf Twitter Bootstrap und möchte eine NavBar am unteren Rand eines tiefen MastHead haben und wenn der Benutzer die Seite vertikal scrollt und die NavBar an die Spitze Ändern Sie den Stil der Seite so, dass die NavBar Fixed wird. Der gewünschte Effekt ist der gleiche wie http://www.happycog.com/ nur mit der Bootstrap NavBar.Machen Scrollen NavBar Stick oben auf Browser in Bootstrap

Die eigentliche Frage ist also, wie man den Navbar-Fixed-Top-Stil auslöst, wenn die NavBar auf Position 0 gescrollt wird, dh oben im Browser.

Alle Ideen oder Hinweise würden geschätzt werden. Vielen Dank.

Quelle

2012-06-30 user1493194

CSS - position: fixed; –

Sie haben ein Beispiel dafür mit der Subnav im [booststrap doc] (http://twitter.github.com/bootstrap/javascript.html) – Sherbrow

Dies ist ein Duplikat von: http://stackoverflow.com/questions/ 9179708/replicating-bootstraps-main-nav-und-subnav Im Wesentlichen müssen Sie die feste Klasse hinzufügen und entfernen, wenn die Bildlaufleiste an einen geeigneten Punkt gelangt. – ForbesLindesay

Sie müssen Javascript verwenden, um dies zu tun. Hier ist eine Lösung, die auf jQuery angewiesen ist, um die Positionierung der Navigationsleiste zu fixieren, sobald sie oben auf der Seite angekommen ist, sowie ein temporäres div anzuhängen, um zu verhindern, dass sich das Layout ändert.

http://jsfiddle.net/T6nZe/

Quelle

2012-06-30 20:11:24 swider

Sie können klebrige Position versuchen CSS3:

.sticky { 
    position: sticky; 
    top: 10px; /* When the element reaches top: 10px, it becomes fixed. */ 
    z-index: 100; 
}

Browser-Unterstützung: http://caniuse.com/#feat=css-sticky

Quelle

2013-05-27 01:05:35

Position: sticky hat ziemlich begrenzte Unterstützung, kein Chrome, IE oder Android http://caniuse.com/#search=sticky – Lewis42

für Browser-Kompatibilität In dem Ziel, können folgende von mehr Nutzen sein.

.sticky { 
    position: -webkit-sticky; 
    position: -moz-sticky; 
    position: -ms-sticky; 
    position: -o-sticky; 
    position: sticky; 
    top: 10px; 
    z-index: 100; 
}

Quelle

2013-11-27 15:55:33 lorenalexm

Die CSS-Klasse navbar-fixed-top ist, was Sie hinzufügen möchten.

Hier ist ein Beispiel:

<nav class='navbar navbar-inverse navbar-fixed-top sticky' role='navigation'> 
    <!-- nav content --> 
</nav>

Quelle

2013-12-30 23:42:35

Ich glaube, das ist das, was Sie suchen: http://www.w3schools.com/bootstrap/bootstrap_affix.asp

Quelle

2016-05-12 23:14:57

Machen Scrollen NavBar Stick oben auf Browser in Bootstrap

Antwort

Verwandte Themen