bootstrap-Menü oben anbringen

Ich versuche zu tun, eine bootstrap-Menü mit einem Bild und unter dem Menü links, dass, wenn es gescrollt die Menü-sticks auf den oberen Rand des Fensters.

Habe ich gefunden, interessant bootstrap affix und benutzt haben, was in diesem thread:
bootstrap-anbringen : Div unterhalb affix "Sprünge" nach oben. Wie mache ich es glatt schriftrolle hinter?

Das problem ist, dass wenn ich drücken Sie die Menü-Taste die Optionen sind unter dem content-text der Seite.

Ich geschrieben habe, eine Geige für Sie zu sehen, mein problem und eine Lösung versuchen:
http://jsfiddle.net/mram888/WnPqF/

Ich habe versucht, verschiedene z-index für die Klasse von "my menu" - divs, funktioniert aber nur richtig, wenn die Seite gescrollt ist und das Menü ist fixiert auf die Spitze.

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index:2;
}

#nav > .navbar-inner {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}

.nav-wrapper {
    z-index: 2;
}

InformationsquelleAutor mram888 | 2013-01-16

jquery twitter-bootstrap

9

Kann, müssen Sie das z-index zu den #nav nicht .nav-wrapper:
```
#nav { 
  position: relative;
  z-index: 2; 
}
```
Demo:
http://jsfiddle.net/t7pL3/

InformationsquelleAutor Dean
8

Andere Variante für Sie: http://jsfiddle.net/panchroma/6P5sF/

Das Verhalten hier ist etwas anders als zuvor. Die Navigationsleiste scrollt mit der Seite, bevor es angebracht wird, und wenn das minimierte Menü wird geöffnet, es drückt den Inhalt der Seite.

Habe ich entfernt, javascript und bezeichnet alles, was mit data-Attribute, indem Sie den folgenden, um Ihre nav-wrapper-div:
```
<div id="nav-wrapper" data-spy="affix" data-offset-top="100">  
```
data-offset-top ist der Abstand, den Sie brauchen, um zu Blättern, bevor das Menü ist angebracht.

Ich auch eine kleine änderung vorgenommen, um die CSS:
```
#nav-wrapper.affix {
  top: 0;
  width: 100%
}
```
Hoffe, das hilft!

Dies ist eine schöne Methode
vielen Dank, eine Menge Zeit auf der Suche nach dieser Antwort!

InformationsquelleAutor David Taiaroa
2

Scheint es dies kann erreicht werden durch den Austausch der CSS, die Sie zur Verfügung gestellt von
```
#nav {
    width: 100%;
    position:fixed;
}

#nav.affix {
    top: 0;
}

#nav > .navbar-inner {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}
```
Der Hauptunterschied ist, dass hier #nav umfasst sowohl die Fälle #nav.affix und #nav.affix-top

Sehen dieses jsfiddle.

Bearbeiten:
Das problem stellt sich heraus auftreten, wenn #nav's position ist geerbt. Wenn Sie fix es, als ich vorschlug, oder wenn du es auf relative, als die anderen post vorgeschlagen, Ihr problem wird gelöst werden.

Ich mag deine Erklärung die Ursache für den drop-down-Menü unterhalb der Seite Inhalt

InformationsquelleAutor Teisman

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.