使滚动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棒在引导程序顶部的浏览器

回答

相关问题