Bootstrap 4个带动画缩小的多个固定导航栏

Question

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

每当用户向下滚动时，第一个导航栏的高度会因使用this问题答案中的修改代码删除额外的pt pb引导程序填充类而缩小。

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

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

鉴于这是相当耗费CPU的任务，因为我为第一个Navbar填充属性transition设置了transition:padding 0.2s ease; css属性，并且在转换过程中仍然存在可见的1-2像素间隙导航栏直到转换结束。

是否有更好的方式来附加＆＃39;第二个导航栏到第一个导航栏，以便在第一个导航栏改变高度时跟随它？

相关代码：

<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://www.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;  
}