Podświetlanie linku w nawigacji dla aktywnej sekji

Question

Cześć,

Jak w temacie, a konkretnie chodzi o to że potrzebuję zrobić tak aby przy scrollowaniu strony , kiedy pojawia się nowa sekcja to w nawigacji do linku który prowadzi do tej sekcji była dodawana klasa np "active".

ogólnie nie mam problemu z dodaniem tej klasy przy zmianie podstron , do tego napisałem taki skrypt:

var url = document.URL;
var section = document.querySelectorAll('.section');
var link = document.querySelectorAll('.link');



window.addEventListener('load', ()=>{
  link.forEach(function(e) {
    if (e.getAttribute('href') === url)
    {
      e.classList.add('active');
    };
  })

})

Po załadowaniu pobieram akualny adres strony i porównuje go z wartością atrybutu "href" linka, jeżeli są zgodne to dodaje do niego klasę "active" . Nie wiem natomiast jak to rozwiązać przy przewijaniu strony głownej dla różnych sekcji. 

Będę bardzo wdzięczny za pomoc. 

Pozdrawiam 

Answer 1

Generalnie rzecz biorąc sprawdzasz co jakiś czas pozycję Y czyli pionowo względem początku strony.

Jeżeli ta zmieniła się o jakiś rozmiar (np. wysokość pojedynczej sekcji) to dodajesz odpowiednią klasę na element w menu, to samo jeżeli użytkownik cofa się na sam początek.

Przykładowa implementacja (nie mojego autorstwa - ale dobra żeby podchwycić sam koncept) - https://codepen.io/zchee/pen/ogzvZZ?editors=0010 

Na scrollowanie również jest listener więc bez problemu to ogarniesz ;) -> https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event

Comments

Dziękuję bardzo za odpowiedź. Właśnie tez tak kombinowałem z pozycją Y i wysokością pojedynczej sekcji ;)

Pozdrawiam