使滾動NavBar棒在引導程序頂部的瀏覽器

我是新來Twitter的Bootstrap，並希望有一個深深的MastHead底部NavBar和當用戶垂直滾動頁面和NavBar到達頂部的頁面，將樣式更改爲使NavBar變爲固定。我想要的效果與僅使用Bootstrap導航欄的http://www.happycog.com/相同。使滾動NavBar棒在引導程序頂部的瀏覽器

所以，真正的問題是如何在NavBar滾動到位置0時觸發navbar-fixed-top樣式，即：瀏覽器的頂部。

任何想法或指針，將不勝感激。謝謝。

來源

2012-06-30 user1493194

CSS - 位置：固定; –

你有一個與[booststrap doc]中的subnav的例子（http://twitter.github.com/bootstrap/javascript.html） – Sherbrow

這是一個重複的：http://stackoverflow.com/questions/ 9179708/replicating-bootstraps-main-nav-and-subnav基本上，您需要在滾動條到達適當的位置時添加和刪除固定類。 – ForbesLindesay

您必須使用javascript才能做到這一點。這裏有一個解決方案，它依靠jQuery將導航欄定位轉換爲固定，一旦它到達頁面的頂部，並在其位置粘貼一個臨時div以防止佈局改變。

http://jsfiddle.net/T6nZe/

來源

2012-06-30 20:11:24 swider

您可以嘗試CSS3粘位置：

.sticky { 
    position: sticky; 
    top: 10px; /* When the element reaches top: 10px, it becomes fixed. */ 
    z-index: 100; 
}

瀏覽器支持：http://caniuse.com/#feat=css-sticky

來源

2013-05-27 01:05:35

位置：sticky支持相當有限，沒有Chrome，IE或Android http://caniuse.com/#search=sticky – Lewis42

在瞄準瀏覽器的兼容性，下面可能是更多的使用。

.sticky { 
    position: -webkit-sticky; 
    position: -moz-sticky; 
    position: -ms-sticky; 
    position: -o-sticky; 
    position: sticky; 
    top: 10px; 
    z-index: 100; 
}

來源

2013-11-27 15:55:33 lorenalexm

CSS類navbar-fixed-top是你想要添加的。

下面是一個例子：

<nav class='navbar navbar-inverse navbar-fixed-top sticky' role='navigation'> 
    <!-- nav content --> 
</nav>

來源

2013-12-30 23:42:35

我相信這是你在找什麼： http://www.w3schools.com/bootstrap/bootstrap_affix.asp

來源

2016-05-12 23:14:57

使滾動NavBar棒在引導程序頂部的瀏覽器

回答

相關問題