Two Direction Sticky Sidebar

Spis treści Pokaż

Two Direction Sticky Sidebar jest projektem napisanym w JavaScript, który pozwala na wygodną nawigacje po stronie internetowej i jest prosty w implementacji. Do jego działania nie potrzeba, żadnych framework’ów dzięki czemu nie wpływa negatywnie na wydajność.

Wraz z postępem technologicznym i rosnącą popularnością stron internetowych, ważne jest, aby zapewnić użytkownikom jak najlepsze doświadczenie podczas przeglądania treści online. Jednym z kluczowych aspektów takiego doświadczenia jest nawigacja po stronie internetowej.

Grafika opisująca działanie skryptu o nazwie: dwukierunkowy sticky sidebar — Grafika przedstawiająca działanie dwukierunkowego panelu bocznego

Skrypt powoduje podążanie bocznego panelu nawigacyjnego za użytkownikiem, nawet gdy ten jest wyższy niż okno przeglądarki.

Czym jest właściwość CSS position: sticky?

Jednym z rozwiązań menu nawigacyjnego na stronach internetowych jest panel boczny. Tradycyjnie, boczne panele nawigacyjne były statycznymi elementami, które po przewinięciu strony do jej dalszej części, znikały z zasięgu wzroku użytkownika.

Właściwość position: sticky wyeliminowała ten problem. Gdy użytkownik przewija stronę w dół, boczny panel nawigacyjny przykleja się do górnej części przeglądarki. Zapewniając stały dostęp do ważnych linków, sekcji strony lub narzędzi.

Wada zwykłego Sticky Sidebar

Użycie właściwości position: sticky może wprowadzać pewne problemy, gdy element, który ma być przyklejany, jest wyższy niż dostępna przestrzeń na ekranie. Oto co może pojawić się w takiej sytuacji (przewiń na san dół):

Jak widać takim przypadku dolna część przyklejonego elementu będzie niewidoczna, aż nie przewiniemy strony na sam dół. To zachowanie wynika z natury samego position: sticky, które polega na przyklejaniu elementu do odpowiedniej krawędzi kontenera, gdy dochodzi do punktu zakotwiczenia, a następnie odklejaniu go, gdy zostaje przekroczone kolejne punkty zakotwiczenia.

Korzyści ze stosowania Two Direction Sticky Sidebar

Wprowadzenie dwukierunkowego sticky sidebara całkowicie eliminuje ten problem. Ta innowacyjna technika pozwala na zastosowanie bocznego panelu nawigacyjnego, którego widoczna część zmienia się wraz z kierunkiem przewijania przez użytkownika.

Użycie dwukierunkowego Sticky Sidebar na stronie przynosi wiele więcej korzyści. Przede wszystkim, poprawia on nawigację i dostęp do treści na stronie, co prowadzi do zwiększenia użytkowalności strony. Użytkownicy nie muszą się już martwić o zagubienie się w długiej stronie. Dodatkowo, narzędzie to może również pomóc w promocji ważnych treści lub funkcji strony, umożliwiając ich wyeksponowanie w bocznym panelu nawigacyjnym.

Two direction sticky sidebar jest również korzystny z perspektywy projektantów stron internetowych. Daje im więc większą elastyczność i kontrolę nad układem strony.

Demo skryptu znajduje się pod tym adresem: https://tdss.antosik.dev/. Można tam zobaczyć jak skrypt działa na różnych przeglądarkach

Pobieranie

Skrypt można pobrać z mojego GitHub’a. Pierwszy ze sposobów to użycie w konsoli następującej komendy:

git clone https://github.com/Krzysztof-Antosik/Two-direction-Sticky-Sidebar.git

Można też pobrać go bezpośrednio z repozytorium.

Jak użyć skryptu Two Direction Sticky Sidebar?

Użycie skryptu jest banalnie proste. Wystarczy na końcu strony umieścić kod JavaScript , a następnie do panelu nawigacyjnego dodać atrybut: data-sticky ="true".

Oto przykład:

<!DOCTYPE html>
<html>
  <body>
      <header></header>
          <div>
            <main></main>
            <aside data-sticky="true"></aside>
          </div>
      <footer></footer>
      <script src='/src/Two-Direction-Sticky-Sidebar.js' async></script>
  </body>
</html>

Jeśli chcesz opcjonalnie ustawić przerwy nad lub pod paskiem bocznym, możesz użyć dodatkowych atrybutów: data-top-gap="20" i data-bottom-gap="20".

Możesz również dodać atrybut data-mobile-width do paska bocznego. jeśli ustawisz go, na przykład: data-mobile-width="768" skrypt przestanie działać, gdy ekran będzie mniejszy niż 768px. Pozwala to na większą kontrolę nad responsywnością strony.

Wsparcie i licencja

Skrypt udostępniłem na licencji MIT. Pozwala ona na używanie, kopiowanie, modyfikowanie i rozpowszechnianie oprogramowania, pod warunkiem umieszczenia informacji o prawach autorskich i zrzeczenia się odpowiedzialności przez twórców.

Jeśli chcesz podzielić się uwagami, pomóc w rozwoju lub potrzebujesz wsparcia, zachęcam do dyskusji w komentarzach, lub kontakt poprzez formularz kontaktowy.

Zachęcam również do zostawienia gwiazdki na GitHubi’ie oraz do oddania głosu na moją odpowiedź na Stackoverflow, która linkuje do tego projektu. Będę wdzięczny również za udostępnianie tego wpisu w mediach społecznościowych.