Bootstrap 4多个固定的导航栏，具有动画缩小

Question

我有两个导航栏，fixed-top其中的一个显示在另一个下方，第二个显示在其中的top: *height of first navbar*CSS上。

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

由于两个导航条都是固定的，因此当第一个导航条缩小时，两个导航条之间会产生间隙。

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

考虑到这是相当消耗CPU的任务，因为我transition为第一个Navbar padding属性设置了css属性transition:padding 0.2s ease;，并且在过渡期间，直到过渡结束之前，导航栏之间仍然可见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://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，以将填充动画应用于顶部导航栏，而不是affix元素：

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