1

Twitterのブートストラップを使用しています。

これをページに追加して、ナビゲーションバーをスクロールに合わせました。 <div class="nav-collapse collapse **navbar-fixed-top**">

しかし、cssを使用して再度配置することはできないようです。を削除すると、必要な場所がわかりますposition:fixed。

2 番目の問題は、ページをスクロールするときに、現在どのセクションにいるかについてリンクがアクティブになっている必要があることです。これはどういうわけかもう機能しません。

jQuery One Page Nav Plugin と Twitter Bootstrap を使用しています。

ライブサイトへのリンク

4

1 に答える 1

2

デフォルトでは、Bootstrap はタブレットと電話の固定位置を削除します。これをオーバーライドしたい場合は、次を試してください。

編集 

@media (max-width: 979px){

    .navbar-fixed-top, .navbar-fixed-bottom {
    position: fixed;
    }  

}

現在、メニュー リンクには次のものがあります。

<a href="#section-2">Cv</a>

リンク先

 <div class="full-2">
 <div class="container-narrow">
 <div class="section" id="section-2">
 <section>
 ....

これを次のように変更してみてください。

これでうまくいかない場合は、以下のようにセクション div を移動します。 

 <section id="section-2">
 <div class="full-2">
 <div class="container-narrow">

 ....

アップデート

@media css の構文が正しくありません (以前の私の間違いです)。必要なのは次のとおりです。 

/*By default, Bootstrap removes the fixed position for tablets and phones*/
@media (max-width: 979px){

.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
    }
}

次に、html で追加のクラスを navbar に追加して、追加することを指定する必要があります。 

<div id="top-nav" class="navbar navbar-fixed-top">

これですべてがうまく機能し、ドロップダウン ナビゲーション リンクのスタイルを変更するだけで済みます。

このライブを参照してください: http://jsfiddle.net/panchroma/KbMvX/ およびhttp://fiddle.jshell.net/panchroma/KbMvX/show/

于 2013-03-12T22:04:44.567 に答える