Jednym z bardzo istotnych czynników wpływających na odbiór witryny jest informacja, gdzie użytkownik aktualnie się z znajduje. Ma to ogromne znaczenie, gdy witryna jest napisana w myśl zasady Single Page – czyli wszystko co widzi użytkownik, znajduje się na jednej stronie. W tego typu stronach użytkownik najczęściej używa paska przewijania lub rolki myszy do nawigowania. Można poinformować użytkownika w jakiej dokładnie znajduje się części witryny, podświetlając odpowiednią pozycję w menu nawigacyjnym.
Bootstrap dostarcza mechanizm nazwany ScrollSpy, dzięki niemu w łatwy sposób możemy zaimplementować opisaną funkcjonalność.
Zobacz poniższy przykład. Wraz z przewijaniem strony, podświetlana jest odpowiednia pozycja w Menu.
See the Pen bootstrap scrollspy by Tomasz Wikło (@studioleopard) on CodePen.19725
Cały potrzebny kod składa się z dwóch części. Pierwsza to bardzo mocno okrojone, na potrzeby przykładu menu nawigacyjne a druga to treści z wydzielonymi sekcjami o unikalnych ID ( u nas home, portfolio, blog i kontakt). W pasku nawigacyjnym znajdują się odwołania href do poszczególnych sekcji. Atrybut data-spy definiuje obszar treści dla Bootstrapa, aby ScrollSpy zadziałał podczas przewijania strony, trzeba nadać mu wartość “scroll“. Atrybut data-target odpowiada za podświetlanie odpowiednich odsyłaczy – dodaje lub usuwa klasę active dla elementów listy nawigacyjnej. Powinien zawierać identyfikator paska nawigacyjnego, w powyższym przykładzie jest to #navbar-example. Zastosowałem również atrybut data-offset, jest on przydatny aby poinformować ScrollSpy ile pikseli od góry strony ma zignorować, zanim uaktywni swoje działanie. W powyższym przykładzie wpisałem 60 ze względu na widoczny na górze pasek nawigacyjny.
ScrollSpy i JavaScript
Warto wiedzieć, że można jeszcze inaczej uruchomić ScrollSpy – za pomocą JavaScriptu. Jest to o tyle przydatne rozwiązanie, że nie trzeba dodawać żadnych atrybutów data-*. Wystarczy jedynie wskazać odpowiedni selektor z treściami i menu nawigacyjnym.
See the Pen scrollspy javascript by Tomasz Wikło (@studioleopard) on CodePen.19725
Jak widzisz, wcale nie jest to skomplikowane do zaimplementowania a bardzo ułatwia użytkownikowi zorientowanie się, gdzie znajduje się na stronie.
A czy Ty używasz ScrollSpy w swoich projektach? A może preferujesz alternatywne rozwiązania? Podziel się swoim doświadczeniem.
Opublikowano 1 lutego 2016 w kategorii blog, css, html, poradnik.
