Bootstrap Affix Nav causa Div al di sotto di Jump Up

Question

Ho creato un JSFiddle usando la funzione di affrancatura di Bootstrap per fare in modo che una nav rimanga nella parte superiore dello schermo quando si scorre verso il basso e l'intestazione si sposta fuori dalla vista.

Il problema che sto avendo è che quando si utilizza puro HTML, il testo sotto il nav salta in alto e si nasconde dietro il nav troppo presto.

Controllare il codice problematico here.

Ecco il codice che ho usato:

<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> 

Il CSS è la seguente:

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

ho trovato un problema molto simile here ma quando si utilizza il codice come in questo esempio, per qualche ragione non funziona per me.

L'ulteriore pezzo di CSS che ha fatto il trucco è la seguente:

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

Sono anche a conoscenza di soluzioni di JavaScript, come this one here che utilizza il seguente codice per creare l'effetto desiderato:

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

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

Sto solo cercando di capire perché la mia particolare versione solo HTML non si comporta quando si implementa la correzione precedente utilizzando la correzione del padding-top CSS.

Grazie in anticipo per la vostra assistenza.

Answer 1

Questo sembra funzionare:

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

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

Quello che sta succedendo è che il plugin affisso rende l'elemento con la classe .affix hanno una posizione fissa nel documento. Ciò rimuove l'elemento affisso dal flusso (o dal layout, se preferisci) e fa collassare il contenitore. Quando ciò accade, il contenuto sottostante scorre verso l'alto per riempire lo spazio occupato dall'elemento apposto.

Aggiungendo la regola sopra, si dice a quel contenitore di mantenere un'altezza minima indipendentemente dal fatto che abbia o meno contenuto. Non deve essere 50px; questa è l'altezza predefinita di .navbar, quindi adattati alle tue esigenze. Se non vuoi che lo all.nav-wrapper s abbia un'altezza minima, assegna un id e usalo.

Answer 2

È necessario un involucro aggiuntivo per farlo funzionare perfettamente. Assegnagli un'altezza minima esattamente uguale a quella che stai apposto in :)