Gdzie ja jestem?

Gdzie ja jestem?

Dowiedz się jak poinformować użytkownika, w jakiej części witryny się znajduje za pomocą ScrollSpy.

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.

Kamil Laskowski

Sympatyk systemów otwartoźródłowych. Człowiek z zapałem, doskonale wiedzący, czego chce od życia. W wolnych chwilach uwielbia tańczyć oraz grać na gitarze.