Bootstrap 4 个带有动画收缩功能的多个固定导航栏

Question

我有两个 fixed-top 类 的导航栏，一个显示在另一个下方 - 第二个导航栏添加了 top: *height of first navbar* css。

每当用户向下滚动时，第一个导航栏的高度会通过使用来自 this 的修改代码删除额外的 pt pb bootstrap 填充 类 来缩小问题的答案。

由于两个导航栏都是固定的，当第一个导航栏发生收缩时，两个导航栏之间会产生间隙。

我对此的解决方案非常激进 - 我使用 javascript-detect-element-resize 库来检测第一个导航栏的调整大小并更改第二个导航栏的 top css 属性 Navbar 根据第一个 Navbar 的高度。

考虑到这是相当 CPU 的任务，因为我为第一个 Navbar 填充属性 transition:padding 0.2s ease; 设置了 transition css 属性 并且还在过渡在导航栏之间仍然可以看到一个可见的 1-2 像素间隙，直到过渡结束。

是否有更好的方法 'attach' 第二个导航栏到第一个导航栏，以便它在第一个导航栏更改高度时跟随？

相关代码：

<nav class="navbar navbar-light bg-faded fixed-top pb-5 pt-5" id="first">
  <a class="navbar-brand">First</a>
</nav>

<nav class="navbar navbar-light bg-faded fixed-top" id="second">
  <a class="navbar-brand">second</a>
</nav>

相关CSS:

#second {
    top: 80px; //customized (first) Navbar's height 
}

#first {
    -webkit-transition:padding 0.2s ease;
    -moz-transition:padding 0.2s ease;
    -o-transition:padding 0.2s ease;
    transition:padding 0.2s ease;
}
.no-padding {
    padding: 0 !important;
}

相关JS：

if ($('#first').scrollTop() > 80){
    $('#first').addClass("no-padding");
}
else {
    $('#first').removeClass("no-padding");
}

在 Codeply 上：https://www.codeply.com/go/GAI3gEtta2

Answer 1

我认为您应该将两个导航栏包装在一个 DIV 中，并将其设为 data-toggle="affix" 元素。这样你只需要固定外部 DIV，第二个导航栏自然会跟随第二个导航栏的高度，因为它们都是静态位置。

https://codeply.com/go/DpHESPqZsx

<div class="fixed-top" data-toggle="affix">
    <div class="navbar navbar-dark bg-dark navbar-expand-sm py-5" id="first">
        ... 
    </div>
    <div class="navbar navbar-light bg-light navbar-expand-sm" id="second">
        ...
    </div>
</div>

调整 CSS 以将填充动画应用于顶部导航栏而不是词缀元素：

.fixed-top #first { 
  -webkit-transition:padding 0.2s ease;
  -moz-transition:padding 0.2s ease; 
  -o-transition:padding 0.2s ease;        
  transition:padding 0.2s ease;  
}

.affix #first {
  padding-top: 0.2em !important;
  padding-bottom: 0.2em !important;
  -webkit-transition:padding 0.2s linear;
  -moz-transition:padding 0.2s linear;  
  -o-transition:padding 0.2s linear;         
  transition:padding 0.2s linear;  
}