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;的属性。现在，第二个导航栏下面的任何元素都会响应50px的边距，这就是随机跳跃的原因。

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

JS

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

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

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

})

如何实现bootstrap多个navbars

1 个答案: