css - ブートストラップ twitter 固定上部の小さいナビゲーション メニュー

Question

これはTwitter Bootstrap http://www.usatoday.com/opinion/でも可能ですか

下にスクロールすると、メニュー部分だけが上部に固定されたままになりますか? 誰かが便利なjsfiddleバージョンを持っているなら、それは本当にいいでしょう.

Answer 1

ナビゲーションバーを取り、接辞プラグインを使用することで機能させることができます。ここに (非常に大まかな) 実例があります: http://bootply.com/87472。重要な部分は CSS にあります。

header {            //this is whatever is sitting above the navbar.
   height:50px;     //this can be set to anything, just make it match
                    //the data-offset-top in the HTML (see below)
}    
.affix {
   width:100%;      //makes sure the "affixed" navbar stretches the full width
   top:0;           //makes it stick to the top when it gets there.
}
.affix + p {        //this is whatever is sitting below the navbar
   margin-top:70px; //set to the total height of your navbar
}

必要な HTML のビット:

<div class="navbar navbar-default" data-spy="affix" data-offset-top="50">

上記のようにdata-offset-top、navbar の上にある要素の高さと一致する必要があります。

ファンシーなエフェクトについては、 css トランジションを調べてその魔法を実現することをお勧めします。