css - 如何实现 Bootstrap 多个导航栏

Question

我已经做了很多阅读和搜索，但我似乎被卡住了。我正在寻找与以下功能非常相似的功能: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;
}

Answer 1

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

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

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

JS

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

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

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

})