Bootstrap Affix Nav verursacht Div unter zu springen

Question

Ich habe eine JSFiddle mit Bootstrap Affix-Funktion, um ein Nav bleiben am oberen Rand des Bildschirms, wenn Sie nach unten und die Kopfzeile bewegt sich aus der Sicht.

Das Problem, das ich habe, ist, dass bei Verwendung von reinem HTML, der Text unter dem Nav springt auf und versteckt sich hinter dem Nav zu früh.

Überprüfen Sie den problematischen Code here.

Hier ist der Code, den ich verwenden:

<div class="container"> 
<div class="row"> 
    <div class="span12"> 
     <div class="well"> 
      <h1>Banner</h1> 
     </div> 
    </div> 
</div> 
</div> 
<div class="nav-wrapper"> 
<div class="nav navbar affix" data-spy="affix" data-offset-top="120"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <div class="span12"> 
       <a class="brand" href="#">My Brand</a> 
       <span class="navbar-text"> 
        This is a navbar. 
       </span> 
      </div>  
     </div> 
    </div> 
</div> 
</div> 
<div class="container"> 
<div class="span3"> 
    <h2>some lorem ipsum for scrolling:</h2> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
</div> 
</div> 

Die CSS ist wie folgt:

.affix { 
    position: fixed; 
    top: 0; 
    width: 100% 
} 

finde ich ein sehr ähnliches Problem here aber bei der Verwendung des Code wie in diesem Beispiel, aus irgendeinem Grunde es funktioniert nicht für mich.

Das zusätzliche Stück CSS, dass der Trick wie folgt tat ist:

.affix + .container { 
    padding-top:50px 
} 

auch bewusst, ich bin von JavaScript-Lösungen wie this one here, die den folgenden Code den gewünschten Effekt zu erzeugen verwendet:

$(function() { 
    $('#nav-wrapper').height($("#nav").height()); 

    $('#nav').affix({ 
     offset: { top: $('#nav').offset().top } 
    }); 
}); 

Ich versuche nur herauszufinden, warum meine bestimmte HTML-Version nicht reagiert, wenn Sie die vorherige Korrektur mit dem CSS padding-top-Fix implementieren.

Vielen Dank im Voraus für Ihre Unterstützung.

Answer 1

Dies scheint zu funktionieren:

.nav-wrapper 
{ 
    min-height:50px; 
} 

Aktualisiert jsFiddle:http://jsfiddle.net/yYE62/5/

Was passiert, ist, dass die Affix-Plugin das Element mit der .affix Klasse macht eine festen Position im Dokument. Dies entfernt das angehängte Element aus dem Fluss (oder Layout, falls Sie dies bevorzugen) und bewirkt, dass der Container zusammenfällt. Wenn dies geschieht, wird der Inhalt nach oben verschoben, um den Platz zu füllen, den das befestigte Element belegt hat.

Durch Hinzufügen der obigen Regel weisen Sie diesen Container an, eine Mindesthöhe beizubehalten, unabhängig davon, ob Inhalt vorhanden ist oder nicht. Es muss nicht 50px sein; Das ist die Standardhöhe von .navbar, also passen Sie sie an Ihre Bedürfnisse an. Wenn Sie nicht möchten, dass alle.nav-wrapper s eine Mindesthöhe haben, weisen Sie eine id zu und verwenden Sie diese stattdessen.

Answer 2

Sie benötigen einen zusätzlichen Wrapper, damit er einwandfrei funktioniert. Geben Sie ihm eine Mindesthöhe genau die gleiche wie die, die Sie Affix sind :)