Question

我正在使用Twitter Bootstrap，但是当用户滚动浏览器时，导航栏会粘在顶部时出现问题。

请参阅我正在处理的主页图表。

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

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

Answer 1

我认为你的班级宣言是错误的。请尝试更改以下行：

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"

等等。希望对你有用。您可能需要稍微调整偏移量/跨度，但它应该可以正常工作。行类将容器的宽度分为12个部分。你有5个导航元素，所以如果你将它们各自设置为span2，你应该有足够的偏移量1并让它们居中。

Answer 2

或者您可以尝试自定义

<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/

这是bootstrap方法http://prntscr.com/1fx30g

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

Answer 3

感谢您的答复到目前为止，但我已经提出了我自己的解决方案，它确实正在寻找，但如果您有更好或更有效的解决方案，请告诉我。

请参阅原始问题的屏幕截图，了解HTML代码和页面布局
我使用了以下脚本（见屏幕截图）：http://s16.postimg.org/abqqs0n51/hhppscript.png

由于

Twitter Bootstrap：当用户滚动浏览器时，修复导航栏顶部

3 个答案: