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

Question

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

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

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

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

由于我为第一个 Navbar 填充属性 transition:padding 0.2s ease; 设置了 transition css 属性，因此这是相当耗费 CPU 的任务；而且在过渡期间在过渡结束之前，导航栏之间仍然存在可见的 1-2 像素间隙。

是否有更好的方法将第二个导航栏“附加”到第一个导航栏，以便在第一个导航栏更改高度时它会跟随？

相关代码:

<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;  
}