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

问题描述

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

每当用户向下滚动时，第一个导航栏的高度都会通过使用 这个问题的答案.

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

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

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

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

相关代码:

<a class="navbar-brand">第一</a></nav><nav class="navbar navbar-light bg-faded fixed-top" id="second"><a class="navbar-brand">second</a></nav>

相关 CSS:

#second {顶部:80px；//自定义(第一个)导航栏的高度}#第一的 {-webkit-transition:padding 0.2s 缓和；-moz-transition:padding 0.2s 缓和；-o-transition:padding 0.2s 缓和；过渡:padding 0.2s 缓和；}.无填充{填充:0！重要；}

相关JS:

if ($('#first').scrollTop() > 80){$('#first').addClass("no-padding");}别的 {$('#first').removeClass("no-padding");}

关于 Codeply:https://www.codeply.com/go/GAI3gEtta2

解决方案

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

https://codeply.com/go/DpHESPqZsx

<div class="navbar navbar-dark bg-dark navbar-expand-sm py-5";id=第一个">...
<div class="navbar navbar-light bg-light navbar-expand-sm";id=第二个">...

调整 CSS 以将填充动画应用于顶部导航栏而不是词缀元素:

.fixed-top #first {-webkit-transition:padding 0.2s 缓和；-moz-transition:padding 0.2s 缓和；-o-transition:padding 0.2s 缓和；过渡:padding 0.2s 缓和；}.affix #first {填充顶部:0.2em ！重要；填充底部:0.2em ！重要；-webkit-transition:padding 0.2s 线性；-moz-transition:padding 0.2s 线性；-o-transition:padding 0.2s 线性；过渡:填充 0.2s 线性；}

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.

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.

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?

Relevant code:

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

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

Relevant JS:

if ($('#first').scrollTop() > 80){
    $('#first').addClass("no-padding");
}
else {
    $('#first').removeClass("no-padding");
}

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

解决方案

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://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>

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屋！