Bootstrap navbar Rucke beim anbringen

Question

Schalt I eine Standard-Bootstrap navbar haben, wo nach 50 Pixel-Scrolling, jQuery fügt wie gezeigt befestigen:

<script type="text/javascript"> 
    $('#mainNav').affix({offset:{top:0}}) 
</script> 

Da dies die navbar von position:relative zu position:fixed schaltet, verursacht es einen Ruck, wenn Der Inhalt unter der Navigationsleiste springt an den oberen Bildschirmrand, um den Raum zu füllen.

Ich habe herumgespielt und kann nicht verhindern, dass dieser Sprung passiert oder zumindest reibungslos funktioniert. Ich habe versucht, die Navbar von Anfang an behoben und eine margin-top für die Höhe der Navbar hinzufügen, aber das funktioniert leider nicht richtig.

CSS

.navbar-default { 
    background:#fff!important; 
    border:0; 
    border-top:4px solid #01203F; 
    height:110px; 
    border-radius:0; 
    margin:0; 
} 
@media(min-width:768px) { 
    .navbar-default { 
     -webkit-transition: all 1s; 
     -moz-transition: all 1s; 
     transition: all 1s; 
     border-bottom: none; 
     z-index:10001!important 
    } 

    .navbar-default.affix { 
     width:100%; 
     background: #0E2A45!important; 
     border-bottom: none; 
    } 
} 

Answer 1

dies gelöst, indem die navbar in einer Hülle platzieren.

Die navbar 110px Höhe wurde so hinzugefügt:

<div class="nav-wrapper"> 
<div class="navbar affix">...</div> 
</div> 

CSS

.nav-wrapper {min-height:110px}