Bootstrap 4多个带有动画收缩功能的固定导航栏 [英] Bootstrap 4 multiple fixed Navbars with animated shrink

问题描述

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

I have two Navbars with fixed-top classes displayed one below the other - second one having top: *height of first navbar* css added to it.

每当用户向下滚动时，第一个导航栏的高度就会通过使用

Whenever user scrolls down, the height of the first navbar shrinks by removing extra pt pb bootstrap padding classes using modified code from this question's answer.

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

Since both Navbars are fixed, when the shrinkage of the first one occurs, there is a gap produced between the two navbars.

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

My solution to this was very drastic - I used javascript-detect-element-resize library to detect the resize of the first navbar and change the top css property of the second Navbar according to the height of the first Navbar.

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

Given that this is rather CPU consuming task since I have transition css property set for the first Navbar padding attribute transition:padding 0.2s ease; and also during the transition there is a visible 1-2 pixel gap still seen between the navbars up until the end of the transition.

是否有更好的方法将第二个导航栏附加"到第一个导航栏，以便在第一个导航栏更改高度时都可以跟随它?

Is there a better way to 'attach' the second Navbar to the first so that it follows whenever the first Navbar changes height?

相关代码:

<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

On Codeply: https://www.codeply.com/go/GAI3gEtta2

推荐答案

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

I think you should wrap both navbars in a single DIV, and make that the data-toggle="affix" element. This way you only make the outer DIV fixed, and the second navbar will naturally follow the height of the 2nd since both are static position.

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元素:

Adjust the CSS to apply the padding animation to the top navbar instead of the affix element:

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

这篇关于Bootstrap 4多个带有动画收缩功能的固定导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！