bootstrap menu top affix

Question

私はイメージを使ってブートストラップメニューを行い、メニューリンクの下でスクロールするとメニューがウィンドウの上にくっつくようにしようとしています。

私は面白いブートストラップ接辞を見つけたし、このスレッドで何を使用しています bootstrap-affix : Div underneath affix "jumps" to top. How do I make it smoothly scroll behind?

問題は、私は、メニューのボタンを押したときのオプションは、ページのコンテンツのテキストの下にあるということです。

私はあなたが私の問題を参照し、解決策を試してくださいするためのフィドルを書いた

： http://jsfiddle.net/mram888/WnPqF/

私は私のメニューのdivのクラスに対して異なるZインデックスを入れてみましたが、ときにのみ正しく動作しましたページがスクロールされ、メニューが上部に貼り付けられます。

#nav.affix { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index:2; 
} 

#nav > .navbar-inner { 
    border-left: 0; 
    border-right: 0; 
    border-radius: 0; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    -o-border-radius: 0; 
} 

.nav-wrapper { 
    z-index: 2; 
} 

Answer 1

あなたは#navない.nav-ラッパーにz-indexを適用する必要があります。

#nav { 
    position: relative; 
    z-index: 2; 
} 

デモ： http://jsfiddle.net/t7pL3/

Answer 2

それSE EMSこれは、主な違いは、#navは両方のケース#nav.affixと#nav.affix-top

this jsfiddleを参照してくださいをカバーここにいることである

#nav { 
    width: 100%; 
    position:fixed; 
} 

#nav.affix { 
    top: 0; 
} 

#nav > .navbar-inner { 
    border-left: 0; 
    border-right: 0; 
    border-radius: 0; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    -o-border-radius: 0; 
} 

によって、あなたが提供するCSSを交換することによって達成することができます。

編集：#navの位置がを継承されているとき 問題が発生することが判明しました。 をに修正した場合は、提案したように、またはの相対に設定すると、他の投稿が示唆されているように、問題は解決されます。

Answer 3

あなたのための別のバリエーション：http://jsfiddle.net/panchroma/6P5sF/

ここでの動作は以前よりもわずかに異なっています。ナビゲーションバーは、ページが添付される前にスクロールし、折りたたまれたメニューが開かれると、ページコンテンツをプッシュダウンします。

私はあなたのNAV-ラッパーのdivに以下を追加して、JavaScriptを取り除き、data attributesを使用して、すべてを呼ば：

<div id="nav-wrapper" data-spy="affix" data-offset-top="100"> 

データ・オフセット・トップは、メニューが固定される前にスクロールする必要がある距離です。

は、私はまた、あなたのCSSに一つの小さな変更を加えた。このことができます

#nav-wrapper.affix { 
    top: 0; 
    width: 100% 
} 

希望を！