bootstrap menu top affix

Question

我正在嘗試使用圖像和菜單鏈接進行引導菜單，當它滾動時，菜單會粘在窗口的頂部。

我找到了有趣的bootstrap詞綴，並使用了這個帖子中的內容： bootstrap-affix：Div下面的詞綴“跳轉”到頂部。 如何讓它順利滾動？

問題是當我按下菜單按鈕時，選項位於頁面的內容文本下。

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

我試圖為菜單div的類添加不同的z-index，但只有在頁面滾動並且菜單貼在頂部時才能正常工作。

#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-wrapper：

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

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

Answer 2

你的另一個變種： http ： //jsfiddle.net/panchroma/6P5sF/

這里的行為與以前略有不同。 導航欄在粘貼之前會滾動頁面，當打開折疊菜單時，它會向下推送頁面內容。

我刪除了你的javascript，並通過將以下內容添加到nav-wrapper div來使用數據屬性調用所有內容：

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

data-offset-top是在粘貼菜單之前需要滾動的距離。

我還對你的CSS做了一個小改動：

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

希望這可以幫助！

Answer 3

這似乎可以通過替換您提供的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

看到這個jsfiddle 。

編輯：當繼承 #nav的位置時，問題就出現了 。 如果您按照我的建議修復它，或者如果您將其設置為相對 ，正如其他帖子所建議的那樣，您的問題將得到解決。