Skocz do zawartości
Pecetowicz Forum komputerowe

[JS] Zmiana aktywnego linku w menu przy scrollowaniu


Rekomendowane odpowiedzi

Witam, mógłby mi ktoś wytłumaczyć, dlaczego ten kod nie działa? Od niedawna interesuje się JavaScriptem, więc proszę o nakierowanie 🙂

Chciałbym, aby przy scrollowaniu strony zmieniał się aktywny link w menu, np. że jak się przejedzie do drugiej sekcji to żeby w menu był aktywny drugi link, itd.

HTML:

<nav class="navbar">
   <div class="navbar_logo">
       <img src="images/logo.png" alt="Logo Navbar">
   </div>
   <ul class="navbar_menu">
       <li class="navbar_menuItems"><a href="#1">1</a></li>
       <li class="navbar_menuItems"><a href="#2">2</a></li>
       <li class="navbar_menuItems"><a href="#3">3</a></li>
       <li class="navbar_menuItems"><a href="#4">4</a></li>
       <li class="navbar_menuItems"><a href="#5">5</a></li>
   </ul>
</nav>

JavaScript:

let mainNavLinks = document.querySelectorAll("nav ul li a");
        let mainSections = document.querySelectorAll("section");

        let lastId;
        let cur = [];

        window.addEventListener("scroll", event => {
        let fromTop = window.scrollY;

        mainNavLinks.forEach(link => {
            let section = document.querySelector(link.hash);

            if (
            section.offsetTop <= fromTop &&
            section.offsetTop + section.offsetHeight > fromTop
            ) {
            link.classList.add("active_links");
            } else {
            link.classList.remove("active_links");
            }
        });
        });

 

Odnośnik do odpowiedzi
Udostępnij na innych stronach
Napisano (edytowane)
Godzinę temu, aXenDev napisał:

A gdzie są te sekcje?

A okej, myślałem że nie będą potrzebne. Zaktualizowałem: https://codepen.io/adam-rydza/pen/qBrdXjW

Na razie mam jedną, bo chciałem te aktywne linki sobie ogarnąć i potem będę lecieć dalej.

Edytowane przez v3nz
Odnośnik do odpowiedzi
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
×
×
  • Dodaj nową pozycję...