ブートストラップのナビゲーションバーのジャーク

Question

を固定するために切り替えたとき、私はは50pxをスクロールした後、jQueryのが示すように貼る追加し、標準のブートストラップ・ナビゲーションバー、持っている：

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

これはposition:relativeからposition:fixedにナビゲーションバーを切り替えているのでとき、それはジャークの原因をナビゲーションバーの下のコンテンツが画面の上部にジャンプしてスペースを埋める。

私は周りを遊んでいて、このジャンプが起こらないようにしたり、少なくとも滑らかにしているのを防ぐことができません。私はnavbarを最初から修正し、navbarの高さにmargin-topを追加しようとしましたが、残念ながらこれは正しく機能しません。

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

は、ラッパーにナビゲーションバーを配置することによって、これを解決しました。

ナビゲーションバーは110px高さなので、追加されました：

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

CSS

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