引導菜單頂部附加

Question

我試圖做一個帶圖像和菜單鏈接的引導菜單，當它滾動時，菜單粘在窗口的頂部。

我發現有趣引導詞綴，並使用了什麼是在這個線程： bootstrap-affix : Div underneath affix "jumps" to top. How do I make it smoothly scroll behind?

的問題是，當我按下菜單的按鍵選項頁面內容的文字之下。

我寫了一個小提琴給你看我的問題，並嘗試解決： http://jsfiddle.net/mram888/WnPqF/

我試圖把不同的z-index爲班級我的菜單的div的，但是隻有正常工作時該頁面將滾動並且菜單被粘貼在頂部。

#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

你需要應用z-index到#nav不是.nav-包裝：

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

演示： http://jsfiddle.net/t7pL3/

Answer 2

它本身EMS，這可以通過替換您所提供的CSS來實現由

#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; 
} 

的主要區別是，在這裏，#nav涵蓋這兩種情況下#nav.affix和#nav.affix-top

見this jsfiddle。

編輯： 當#nav的位置是繼承時，問題原來發生。如果你修復它，如我建議，或者如果你將它設置爲相對，如其他帖子建議，您的問題將得到解決。

Answer 3

爲你另一種變化：http://jsfiddle.net/panchroma/6P5sF/

這裏的行爲比以前略有不同。導航欄在粘貼之前隨頁面一起滾動，並且當摺疊菜單打開時，它將按下頁面內容。

我刪除使用data attributes通過添加以下到你的資產淨值的包裝DIV您的JavaScript，並呼籲一切：

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

數據偏移頂是需要貼在菜單之前滾動的距離。

我也做了一個小的改變你的CSS：

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

希望這有助於！