Twitter引导程序:修复用户滚动经过导航栏时导航栏顶部的问题

Twitter Bootstrap: fix the nav bar top when user scrolls past it

本文关键字：导航 顶部 问题 经过 滚动 引导程序 复用 用户 Twitter      更新时间：2023-09-26

我正在使用Twitter Bootstrap，但当用户滚动经过导航栏时，导航栏无法固定在顶部。

请看我的主页图。

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

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

或者你可以尝试自定义

<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有class static，u需要class.navbar固定顶部

我认为您的类声明是错误的。尝试更改下面的行：

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，让它们居中。

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

  1. 关于html代码和页面布局，请参阅我最初问题的截图
  2. 我使用了以下脚本（见屏幕截图）：http://s16.postimg.org/abqqs0n51/hhppscript.png

感谢

相关文章：