Два навигации с липкими ⇐ CSS

[Anonymous]

Я пытаюсь создать две навигации, которые находятся ниже друг друга. Поэтому до тех пор, пока я не сделаю ни один из двух, Navbar-1 будет невидимым. NAVBAR-2, который находится под NAVBAR-1, будет иметь нормальную липкую, то есть, когда я прокручиваю мимо DIV, NAVBAR-2 будет исправлен в верхней части страницы. Что я пытаюсь сделать это, чтобы они оба работали одновременно. то есть, когда я прокручиваю вниз, NAVBAR-1 будет невидимым, а навигация будет зафиксирована наверху, пока я не прокрутил вверх, тогда NAVBAR-2 будет перенесен вниз, чтобы приспособить NAVBAR-1. Как я могу достичь этого?

Код: Выделить всё

window.onscroll = function() {
myFunction();
scrollDetect();
};

var navbar = document.getElementById("navbar");
var navbar2 = document.getElementById("navbar2");
var divAboveHeading = document.getElementById("navbar");
var gapBetweenElements = 50;
var stickyOffset = divAboveHeading.offsetTop + divAboveHeading.offsetHeight + gapBetweenElements; // Calculate the offset

function scrollDetect() {
var lastScroll = 0;
let currentScroll = document.documentElement.scrollTop || document.body.scrollTop; // Get Current Scroll Value

if (currentScroll > 0 && lastScroll = stickyOffset) {
navbar2.classList.add("sticky2");
} else {
navbar2.classList.remove("sticky2");
}
}< /code>
.main-navbar{
position: absolute;
display: inline-flex;
background-color: red;
width: 100%;
top: 2.4rem;
height: 4.5rem;
align-items: center;
z-index: 101;
}

.heading {
width: 100%;
position: relative;
top: 10rem;
display: flex;
justify-content: space-between;
background-color: red;
z-index: 100;
}

.sticky {
position: fixed;
top: 0;
width: 100%;
animation: faceInEffect 0.3s;
-webkit-animation: faceInEffect 0.3s;
}

@keyframes faceInEffect {
from {
top: -5rem;
}
to {
top: 0rem;
}
}

.sticky2 {
top: 0;
position: sticky;
}

.content{
position: absolute;
top:100rem;
}< /code>



Test
Test2
Test3





Content

Test2
Test3



 contetn to scroll

Подробнее здесь: https://stackoverflow.com/questions/771 ... ith-sticky