Twitter Bootstrap：修復導航欄頂部，當用戶滾過去它

我正在使用Twitter Bootstrap，但有問題與獲取導航欄時粘到頂部時，用戶滾動它。我希望有人能告訴我哪裏錯了。Twitter Bootstrap：修復導航欄頂部，當用戶滾過去它

請參閱我的工作主頁圖。

圖：http://i.stack.imgur.com/OKYCA.png 代碼：http://i.stack.imgur.com/G3gP6.png

例如：https：//開頭thomsonreuterseikon.com/（注意如何導航欄棍子當你向下滾動頁面的頂部）

2013-07-17 Andy

嘗試這裏指： twitter引導navbar固定頂部重疊網站]（http://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site）。另外我注意到在你的CSS中你說navbar-static-top，你在尋找navbar-fixed-top嗎？ – holbrookbw1

使用位置：固定的＃ –

@ holbrookbw1 - navbar-fixed-top是在之後的事情，但只有當您開始滑過導航欄時纔會生效。那有意義嗎？因此，當頁面首次加載時，導航欄應位於頁眉下方（如圖片鏈接時所示），但當您開始向下滾動時，它應該粘貼到頁面頂部。（有一個單獨的原因，爲什麼我使用navbar-static-top - 請參閱我對GeneralBrae的回覆） – Andy

感謝迄今爲止的答覆，但我已經拿出了我自己的解決方案，它確實正在尋找什麼，但如果你有更好的或更有效的解決方案，請讓我知道。

請參閱我原來的問題的屏幕截圖
我用下面的腳本（見截圖）HTML代碼和頁面佈局：http://s16.postimg.org/abqqs0n51/hhppscript.png

感謝

來源

2013-07-22 08:57:05 Andy

類聲明我想是錯的。嘗試改變線下：

nav class="navbar navbar-static-top"

到

div class="navbar"

編輯：

要集中的導航元素，添加「行」到線下：

div class="container" => div class="container row"

然後設置ul標籤類也包含span12，所以

ul class="nav span12"

現在設置你的導航元素的位置，設置自己的班級是跨度2，和偏移第一個（可能使用偏移1），所以你必須

li class="active span2 offset1" 
li class="span2" 
li class="span2"

等。希望這對你有用。你可能不得不擺弄偏移/跨度，但它應該工作得很好。行類將容器的寬度分爲12個部分。你有5個導航元素，所以如果你將它們設置爲span2，你應該有足夠的偏移量1來讓它們居中。

來源

2013-07-17 11:25:34 Brae

如果我不包含「navbar-static-top」位，我的導航欄最終會看起來像這樣：http：// imagebin。 org/264933 - 比較這與ealier圖像鏈接（我希望導航欄是全寬，但內容要居中，這似乎只適用於當我包含導航欄靜態頂部） – Andy

好吧沒有意識到你想要的集中它。請參閱我的編輯 – Brae

感謝您解決方案，以導航欄爲中心使每個菜單項擴展到佔據兩個跨度列，並在導航欄和英雄div之間創建一個5px的白色間隔，所以現在我堅持類'navbar-靜態頂」。關於我的原始問題，我已經提出了我自己的解決方案，該解決方案確實在尋找什麼，但如果您有更好或更有效的解決方案，請告訴我。 – Andy

或U可以嘗試做定製

<div class="nav-collapse">nav nav nav </div> 


body { 
    height: 3000px; 
    top: 0; 
    position: relative; 
} 
.nav-collapse { 
    position: relative; 
    top: 100px; 
    width: 100%; 
    background: #CCC; 
    height: 100px; 
} 


$(window).scroll(function() { 
    if ($(window).scrollTop() > 100) { 
     $('.nav-collapse').css('top', $(window).scrollTop()); 
    } 
});

http://jsfiddle.net/cc48t/1350/

這是自舉方法http://prntscr.com/1fx30g

u有一流的靜態和u需要類.navbar固定頂

來源

2013-07-17 11:34:57

感謝迄今爲止的答覆，但我已經拿出了我自己的解決方案，它確實在尋找什麼，但如果您有更好或更有效的解決方案，請告訴我。 – Andy

Twitter Bootstrap：修復導航欄頂部，當用戶滾過去它

回答

相關問題