如何用Twitter Bootstrap來粘貼我的導航欄？

Question

我有一個導航欄，在約50像素從上載頁面的頂部開始了。當我向下滾動，我想了導航欄，以自己「貼上」到頁面的最頂端，並可見當我在其餘內容滾動。這與導航欄在官方引導教程Github網站上的功能類似。
我能夠獲得導航欄使用

<ul class = "nav nav-list bs-docs-sidenav affix"> 

留在原地（儘管總是從頂部50像素，因爲我向下滾動頁面），但一旦我加上「機頂」上述這樣它看起來像

<ul class = "nav nav-list bs-docs-sidenav affix-top"> 

的導航欄不再停留的地方，並從視野中消失，因爲我向下滾動頁面。

jsfiddle without "-top"

jsfiddle with "-top"

如何獲得導航欄貼上頁面的頂部，我向下滾動？

Answer 1

有幾件事情需要糾正。請參閱固定的jsfiddle。

1. 詞綴使用jQuery的引導，如JavaScript代碼實現的，你沒有既不包括BS的JS也不jQuery的
2. 要打開詞綴的元素，根據official documentation，使用data-spy="affix"，而不是class="affix"。你爲什麼這麼做？類affix和affix-top用於不同的目的 - 他們會告訴你詞綴的狀態的時間。如果此時你的元素是固定的，那麼這個類是affix，如果它是可滾動的，BS將類更改爲affix-top。
3. 你必須告訴BS，當你不想被固定的元素。以像素爲單位的距離（你有滾動多少）都被賦予屬性data-offset-top。還要在CSS中指定nav在修復時的外觀。如果它被綁定到頂部（窗口邊框和元素之間沒有空格），那麼.affix { top:0; }就可以做到。