Question

我正在尝试引入一个导航栏，当不再在视图中时，然后采用固定的标头定位。我开始使用这个帖子：Replicating Bootstraps main nav and subnav。

问题：

每当导航栏处于原始位置时，锚链接将超过其目标（其中隐藏目标标题），但是一旦它被修复就不会超过它。我可以修复过冲（我提到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/

怎么办呢？

使用twitter bootstrap创建粘性导航栏？

3 个答案: