Nawigacja która nie znajduje się na górze strony ale przykla się do niej gdy zescolluje się stronę poniżej jej
Nad nawigacją umieszczamy pusty element z id=”nawigacja-polorznie” który będzie referencją połlorzenia normalnego nawigacji gdy nawigacja dolei się i bedzie miała połorzenie top0 na position fixed.
<div id="nawigacja-polorzenie"></div>
<div id="nawigacja">....</div>Do tego css jak ma wyglądać nawigacja przyklejona:
#nawigacja.zescollowana {
position: fixed;
top: 0px;
width: 100%;
}
I nasz js sterujący nadaniem klasy „przescollowana” gdy element nawigacja polorzenie znajdzie się nad lnią foldu:
document.addEventListener("DOMContentLoaded", function () {
var nawigacjaPolorzenie = document.getElementById("nawigacja-polorzenie");
var nawigacjaElement = document.getElementById("nawigacja");
var czyZescrollowany = false;
function obslugaPrzewijania() {
var prostokat = nawigacjaPolorzenie.getBoundingClientRect();
// Sprawdź, czy górna część elementu jest powyżej widoku
if (prostokat.top <= 0) {
nawigacjaElement.classList.add("zescollowana");
czyZescrollowany = true;
} else if (czyZescrollowany && prostokat.bottom >= 0) {
nawigacjaElement.classList.remove("zescollowana");
czyZescrollowany = false;
}
}
// Dodaj nasłuchiwanie zdarzenia przewijania z opóźnieniem
var debounceTimer;
window.addEventListener("scroll", function () {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(obslugaPrzewijania, 50);
});
// Sprawdź początkowy stan przy ładowaniu strony
obslugaPrzewijania();
});