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

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

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

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

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

鉴于这是相当消耗 CPU 的任务，因为我为第一个导航栏填充属性 transition 设置了 transition:padding 0.2s ease; css 属性，并且在过渡期间，导航栏之间仍然存在可见的 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

最佳答案

我认为您应该将两个导航栏都包装在一个 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;
}

关于css - Bootstrap 4 多个带有动画缩小的固定导航栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48773669/