• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Podświetlanie linku w nawigacji dla aktywnej sekji

Object Storage Arubacloud
0 głosów
610 wizyt
pytanie zadane 9 sierpnia 2019 w JavaScript przez Luckyluck87 Użytkownik (660 p.)
edycja 12 sierpnia 2019 przez Luckyluck87

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 

1 odpowiedź

0 głosów
odpowiedź 10 sierpnia 2019 przez Tpk Nałogowiec (40,100 p.)
edycja 10 sierpnia 2019 przez Tpk

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

komentarz 12 sierpnia 2019 przez Luckyluck87 Użytkownik (660 p.)
Dziękuję bardzo za odpowiedź. Właśnie tez tak kombinowałem z pozycją Y i wysokością pojedynczej sekcji ;)

Pozdrawiam

Podobne pytania

0 głosów
1 odpowiedź 310 wizyt
pytanie zadane 4 kwietnia 2016 w JavaScript przez Barus Stary wyjadacz (14,120 p.)
0 głosów
1 odpowiedź 354 wizyt
0 głosów
0 odpowiedzi 125 wizyt
pytanie zadane 11 lutego 2020 w OpenGL, Unity przez Alan Kruszyński Obywatel (1,410 p.)

92,654 zapytań

141,543 odpowiedzi

319,957 komentarzy

62,023 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...