In my design, I have implemented two Navbars with the 'fixed-top' class positioned one below the other. The second Navbar has a custom CSS property added to it: 'top: *height of first navbar*'.
When the user scrolls down, I wanted the height of the first Navbar to shrink by eliminating some Bootstrap padding classes through a code modification inspired by an answer from this Stack Overflow question: link.
However, due to both Navbars being fixed, a gap appeared between them when the first Navbar shrank. To resolve this issue, I resorted to using the 'javascript-detect-element-resize' library to detect the resize of the first Navbar and dynamically adjust the 'top' css property of the second Navbar based on the height changes of the first Navbar.
This solution proved to be quite CPU intensive since I had set a transition effect for the padding attribute of the first Navbar ('transition:padding 0.2s ease;'). Additionally, there was still a slight 1-2 pixel gap visible between the navbars during the transition period.
I am now wondering if there is a more efficient way to connect the second Navbar to the first so that it automatically adjusts whenever the height of the first Navbar changes.
Here is the relevant code snippet:
<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>
Corresponding 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;
}
Associated JavaScript:
if ($('#first').scrollTop() > 80){
$('#first').addClass("no-padding");
}
else {
$('#first').removeClass("no-padding");
}
Check it out on Codeply: link