jquery - 使用 twitter bootstrap 创建一个粘性导航栏？

Question

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

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

问题：

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

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

谢谢。

Answer 1

这是你想要的？

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

Answer 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 插件来处理粘性元素。

Answer 3

很好，但我疯狂地在底部而不是顶部实现粘性导航，如下所示： http: //golkhaneh.tv3.ir/

怎么能这样做？