Jak stworzyć przyklejaną nawigację (fixed navigation) w HTML, CSS i JS

W tym artykule pokażemy, jak stworzyć przyklejaną nawigację, która zmienia swoje położenie na stałe po przewinięciu strony.

HTML

<div id="nawigacja-polorzenie"></div>
<div id="nawigacja">....</div>

CSS:

#nawigacja.zescollowana {
    position: fixed;
    top: 0px;
    width: 100%;
}

JavaScript

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