1

我正在使用 Twitter Bootstrap，但是当用户滚动过去时，导航栏无法停留在顶部。

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

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

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

4

3 回答 3

0

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

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

谢谢

于 2013-07-22T08:57:05.640 回答
0

或者你可以尝试定制

<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

于 2013-07-17T11:34:57.217 回答
0

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

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 个导航元素，所以如果你将它们每个设置为 span2，你应该有足够的偏移量 1 并使它们居中。

于 2013-07-17T11:25:34.397 回答