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

[Гость]

Я пытаюсь создать две панели навигации, расположенные друг под другом. Идея состоит в том, что для navbar-1 стикер не добавляется до тех пор, пока я не прокрутлю страницу между веб-страницами или не дойду до ее конца. Итак, пока я не выполню одно из двух действий, навигационная панель-1 будет невидима. Navbar-2, который находится ниже navbar-1, будет иметь обычное прикрепление, т. е. когда я прокручиваю элемент div, navbar-2 будет зафиксирован в верхней части страницы. Я пытаюсь сделать так, чтобы они оба работали одновременно. т. е. когда я прокручиваю вниз, панель навигации-1 станет невидимой, а панель навигации два будет зафиксирована вверху, пока я не прокрутлю вверх, тогда панель навигации-2 переместится вниз, чтобы разместить панель навигации-1. Я написал JavaScript, чтобы попытаться добиться этого, но работает только одна из функций. Может ли кто-нибудь сказать мне, как я могу этого добиться? Я прикрепляю часть своего кода ниже

window.onscroll = function() { мояФункция(); прокруткаОбнаружение(); }; var navbar = document.getElementById("navbar"); var navbar2 = document.getElementById("navbar2"); var divAboveHeading = document.getElementById("navbar"); вар разрывBetweenElements = 50; вар StickyOffset = divAboveHeading.offsetTop + divAboveHeading.offsetHeight + разрывBetweenElements; // Вычисляем смещение функция прокрутки() { вар LastScroll = 0; let currentScroll = document.documentElement.scrollTop || документ.body.scrollTop; // Получаем текущее значение прокрутки if (currentScroll > 0 && LastScroll = StickyOffset) { navbar2.classList.add("sticky2"); } еще { navbar2.classList.remove("sticky2"); } .main-navbar{ позиция: абсолютная; дисплей: встроенный гибкий; цвет фона: красный; ширина: 100%; верх: 2,4рем; высота: 4,5рем; выровнять-элементы: по центру; z-индекс: 101; } .заголовок { ширина: 100%; положение: относительное; верх: 10рем; дисплей: гибкий; оправдание-содержание: пространство между; цвет фона: красный; z-индекс: 100; } .sticky { положение: фиксированное; верх: 0; ширина: 100%; анимация: faceInEffect 0,3 с; -webkit-animation: faceInEffect 0,3 с; } @keyframes faceInEffect { от { верх: -5рем; } к { верх: 0рем; } } .sticky2 { верх: 0; положение: липкое; } .содержание{ позиция: абсолютная; верх: 100рем; Тест Тест2 Тест3 Содержание Тест2 Тест3 контент для прокрутки