Tag: przyklejone menu

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();
      });