Twitter Bootstrap：当用户滚动过去时修复导航栏顶部答案

【问题标题】：Twitter Bootstrap: fix the nav bar top when user scrolls past itTwitter Bootstrap：当用户滚动过去时修复导航栏顶部
【发布时间】：2013-07-17 11:21:47
【问题描述】：

我正在使用 Twitter Bootstrap，但在用户滚动浏览导航栏时遇到问题。

请查看我正在制作的主页图表。

图表：https://i.stack.imgur.com/OKYCA.png
代码：https://i.stack.imgur.com/G3gP6.png

示例：https://thomsonreuterseikon.com/（请注意向下滚动时导航栏是如何粘在页面顶部的）

【问题讨论】：

尝试在此处引用：twitter bootstrap navbar fixed top overlapping site。我还注意到您在 CSS 中说 navbar-static-top，您在寻找 navbar-fixed-top 吗？
使用position: fixed
@holbrookbw1 - navbar-fixed-top 是我所追求的，但只有在您开始滑过导航栏时才会生效。那有意义吗？因此，当页面首次加载时，导航栏应位于标题下方（如我的图片链接时所示），但当您开始向下滚动时，导航栏应位于顶部。（使用 navbar-static-top 有一个单独的原因 - 请参阅我对 GeneralBrae 的回复）

标签： javascript html twitter-bootstrap

【解决方案1】：

或者你可以尝试自定义

<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

你有静态类，你需要类 .navbar-fixed-top

【讨论】：

感谢到目前为止的回复，但我已经提出了自己的解决方案，它完全符合我的要求，但如果您有更好或更有效的解决方案，请告诉我。

【解决方案2】：

我认为你的班级声明是错误的。尝试更改以下行：

nav class="navbar navbar-static-top"

到

div class="navbar"

编辑：

要集中导航元素，请在下面的行中添加“行”：

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

然后设置ul标签类也包含span12，所以

ul class="nav span12"

现在设置导航元素的位置，将它们的类设置为 span2，并偏移第一个（可能使用 offset1），这样你就可以拥有

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

等等。希望这对你有用。您可能不得不稍微摆弄偏移量/跨度，但它应该可以正常工作。 row 类将容器的宽度分为 12 个部分。你有 5 个 nav 元素，所以如果你将它们每个设置为 span2 你应该有足够的偏移量 1 并使它们居中。

【讨论】：

如果我不包含“navbar-static-top”位，我的导航栏最终看起来像这样imagebin.org/264933 - 将其与之前的图像链接进行比较（我希望导航栏已满宽度，但内容要居中，这似乎只在我包含 navbar-static-top 时才有效）
好吧，没有意识到你想集中它。请看我的编辑
谢谢，但是您将导航栏居中的解决方案使每个菜单项展开以占据两个跨度列，并在导航栏和英雄 div 之间创建一个 5px 的白色间隙，所以现在我坚持上课'导航栏静态顶部'。关于我最初的问题，我提出了自己的解决方案，它完全符合我的要求，但如果您有更好或更有效的解决方案，请告诉我。

【解决方案3】：

感谢到目前为止的回复，但我已经提出了自己的解决方案，它完全符合我的要求，但如果您有更好或更有效的解决方案，请告诉我。

html代码和页面布局参考我原来问题的截图
我使用了以下脚本（见截图）：http://s16.postimg.org/abqqs0n51/hhppscript.png

谢谢

【讨论】：