如何实现引导多个导航栏答案

【问题标题】：how to implement bootstrap multiple navbars如何实现引导多个导航栏
【发布时间】：2014-08-13 06:49:12
【问题描述】：

我已经做了很多阅读和搜索，但我似乎被困住了。我正在寻找与this post 非常相似的功能，它链接到this jsfiddle。

我希望有一个导航栏始终固定在页面顶部（固定顶部），然后当您向下滚动页面时，多个导航栏将附加到固定导航栏的底部。首先，两个导航栏将相互接触。

请参阅THIS jsfiddle。这是我解决此问题的尝试，但是我遇到了无法解决的情况。正如您在jsfiddle中看到的，当您向下滚动页面时，页面的主体突然向上跳跃，这不是一个平滑的过渡。您可以看到数字 1，然后在滚动时跳到 4。我的问题是当您向下滚动页面正文时没有平滑滚动。在解决这个问题时，任何帮助都将不胜感激，我觉得我很接近，但肯定有一些微不足道的错误。

我在将 html 代码粘贴到 stackoverflow 表单时遇到了一些问题，它在 jsfiddle 上，这也是我正在使用的 js/css。

$('.navbar-lower').affix({
    offset: { top: 0 }
});

css

.affix {
  top: 50px;
  width:100%;
}

body {
  margin-top: 50px;
}

.navbar-lower {
  background-color: white;
}

【问题讨论】：

stackoverflow.com/questions/21616381/…
是的，我已经彻底阅读了该链接，并且我在顶部引用了该链接，我的情况更加独特

标签： css twitter-bootstrap

【解决方案1】：

如果这在任何时候对任何人都有帮助，我会详细说明问题以及我是如何解决的。

这很简单。在任何“附加”之前，文档正文中有 margin-top: 50px; 的 css 属性。当元素“附加”或到达 50px 标记时，margin-top 不再应用于第二个导航栏，因为第二个导航栏现在具有position:fixed 和top:50px; 的属性。现在第二个导航栏下方的任何元素都会响应 50px 的边距，这就是随机跳跃的原因。

这是我想出的一种解决方法，我尝试了很多选择，我希望有更好的方法

$(window).bind('scroll', function() {

    var position =  $(window).scrollTop() - $('.navbar-lower').position().top ;

    if(position < 0){
        $("body").css("padding-top", 100);
    }

})

【讨论】：