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：修复导航栏顶部，当用户滚过去它

回答

相关问题