bootstrap-affix: Div unter Affix "springt" nach oben. Wie kann ich es sanft nach hinten scrollen lassen?

Question

Ich habe ein paar Tage mit Boostrap gespielt und bin begeistert von den Möglichkeiten, die es zu bieten hat.

Habe versucht, eine Art "Kopfzeile" zu haben, die oben angebracht ist, wenn der Benutzer runterscrollt.

Sie können meine aktuelle Arbeit finden Sie hier: http://mp3dj.free.fr/affix/site/

jedoch Sie, dass feststellen werden, wenn Sie nach unten scrollen, die „POST 1“ suddenlty springt nach oben auf der Seite. das heißt es gibt keine glatte Scroll hinten wie hier: http://jsfiddle.net/namuol/Uaa3U/

Aktuelle Code:

<div class="container"> 
    <div class="row affix-top" data-spy="affix" data-offset-top="60"> 
    <div class="span12"> 
     <div class="row"> 
     <div class="span3"> 
      <img src="http://www.socialfork.net/public/images/default-profile-photo-female.jpg" class="img-polaroid"> 
     </div> 
     <div class="span9"><h1>Samantha Sam</h1></div> 
    </div> 
    </div> 
</div> 
    <div class="row"> 
    <div class="span12"> 
     <div id="post1" class="box"> 
     <h1>Post 1</h1> 
     <p> Scroll Down↓</p> 
     </div> 
     <div id="post2" class="box"><h1>Post 2</h1></div> 
     <div id="post3" class="box"><h1>Post 3</h1></div> 
    </div> 
    </div> 
</div> 

Jede Hilfe dankbar!

Answer 1

Was in Ihrem Code passiert, ist, dass die oberste Zeile ihre Position zu fixed ändert, wenn ihr Offset nach oben kleiner als 60px ist. Die Konsequenz ist, dass es aufhört, über der nächsten Zeile irgendeinen Platz zu verbrauchen.

In der JSFiddle, die Sie eingeführt haben, gibt es einen JS-Code, den Sie verstehen sollten und der Ihnen helfen sollte. Dies ist für Sie:

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

Es Ihre Header platziert werden muss noch in einer anderen div (Klasse nav-wrapper in Geige genannt). Der obige JQuery-Code legt seine Höhe basierend auf der Zeilenhöhe während der Initialisierung der Seite fest. Die Höhe bleibt gleich, auch wenn die oberste Reihe verschwindet (um fixiert zu werden).

Ein weiterer Teil des Codes JS:

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

macht Sie unabhängig von der Größe des Raumes oberhalb der oberen Reihe, aber in Ihrem Fall ich glaube, Sie brauchen es nicht (man kann es vorhersagen immer dauert 60px).

Answer 2

Wenn Sie die Lösung von Marcin Skórzewski verwenden, beachten Sie, dass, wenn Sie eine Kollabierung in Ihrer Navigationsleiste verwenden, das Drop-down-Menü betroffen ist.

Die Höhe der vollständigen Navbar wird mit dem kleinen Stück JS-Code festgelegt.

Wenn Ihr Fenster kleiner wird, wird die Navigationsleiste durch ||| ersetzt (Standard-Bootstrap verwenden)

Wenn Sie ein Dropdown-Menü verwenden und auf ||| drücken Um das Drop-Down-Menü anzuzeigen, wird es hinter dem folgenden Inhalt platziert. Es wird den Inhalt nicht verschieben. Dies liegt daran, dass die Höhe der Navigationsleiste festgelegt ist.

Mögliche Lösung 1: Entfernen Sie die Höhe der Navigationsleiste, wenn Sie auf ||| klicken und legen Sie es wieder zurück, wenn das Dropdown-Feld zurückgleitet. Mögliche Lösung 2: ein margin-top auf das nächste Element hinzufügen, sobald die navbar

Update-Sticks: https://stackoverflow.com/a/15177077/1059884 eine hervorragende Lösung CSS