使用 twitter bootstrap 创建一个粘性导航栏？答案

【问题标题】：Creating a sticky navbar using twitter bootstrap?使用 twitter bootstrap 创建一个粘性导航栏？
【发布时间】：2012-08-24 17:18:07
【问题描述】：

我正在尝试引入一个导航栏，当它不再可见时，它采用固定的标题定位。我开始使用这个线程：Replicating Bootstraps main nav and subnav。

从那时起，我到达了：http://jsfiddle.net/yTqSc/2/。

问题：

只要导航栏位于其原始位置，锚链接就会越过其目标（隐藏目标标题），但一旦它被固定就不会。我可以修复超调（我提到了http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/），但是当导航栏被修复时，我最终使用链接的间隙过大。

无论导航栏是否固定，任何人都可以建议如何获得一致的结果吗？

谢谢。

【问题讨论】：

标签： jquery css twitter-bootstrap

【解决方案1】：

这就是你要找的吗？

<div class="navbar navbar-fixed-top">

【讨论】：

我不确定这如何回答这个问题。我已经在使用 javascript 动态添加这个类，这似乎是问题的根源。导航到锚链接后添加此类会导致不一致的行为。

【解决方案2】：

您没有任何用于 navbar-fixed-top 的 CSS。此外，您需要在向上滚动时进行处理。

查看演示 http://jsfiddle.net/yTqSc/39/

JavaScript

$(document).scroll(function(){
var elem = $('.subnav');
if (!elem.attr('data-top')) {
    if (elem.hasClass('navbar-fixed-top'))
        return;
     var offset = elem.offset()
    elem.attr('data-top', offset.top);
}
if (elem.attr('data-top') <= $(this).scrollTop() )
    elem.addClass('navbar-fixed-top');
else
    elem.removeClass('navbar-fixed-top');
});

CSS

.subnav {
    background:#FFF;
}
.navbar-fixed-top {
    position:fixed;
}

或者使用 Waypoints jquery 插件来处理粘性元素。

【讨论】：

【解决方案3】：

这很好，但我疯了在底部而不是顶部实现粘性导航，就像这样：http://golkhaneh.tv3.ir/

怎么办？

【讨论】：