Pozycja na stronie w bocznym nawigatorze stworzonego z fontello - podświetla element odpowiednio do pozycji na stronie

Question

Witam,
chce zrobić pasek nawigacyjny, który będzie wskazywał, w którym miejscu na stronie obecnie się znajduje lub, aby po kliknięciu na dany element, strona przewijała się w dany punkt. Nie mam pojęcia jak to zrobić. Czy da się to zrobić za pomocą czystego HTMLA i CSS? Dokładniej mam 6 tematów w menu - przewiduję małe okręgi oddzielone kreskami w pionie(fontello), chciałbym, aby dany okrąg zmienił kolor, gdy strona będzie na danym temacie, a po kliknięciu w okrąg podświetlało go i przewijało stronę. Ma ktoś jakiś pomysł? Jeżeli się nie da to może coś w JSie? Jak sprawdzić aktualną pozycję na stronie?

Answer 1

Nie wiem, czy w samym HTML i CSS da się coś zrobić (no dobra da się, ale jeśli wyjedziemy kursorem poza obszar strony to nie będzie działać), chyba będziesz musiał użyć troszeczkę JS. Można to zrobić np. tak: piszesz kod JS który odczytuje pozycję scrolla, i w zależności od pozycji scrolla zmienia styl jakiegoś elementu w menu, lub dodaje do niego jakąś dodatkową klasę. Pozdrawiam

Answer 2

 Kotficzki http://codepen.io/PatrykTal/pen/BNEdvm

Jeżeli chcesz na każdej podstronie mieć inny kafelek podświetlony to po prostu w kodzie html do danego elementu np> <li> dodajesz class="active" i dla tej klasy zmieniasz kolor :) (na każdej podstronie inny element menu)

ScrollSpy http://codepen.io/zchee/pen/ogzvZZ

Comments

Rzeczywiście super pomysł! Dzięki!