Two Direction Sticky Sidebar

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.

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

Aktualizacja 1.8.8 – Reaktywność i nowa wydajność

Projekt Two Direction Sticky Sidebar doczekał się dużej aktualizacji do wersji 1.8.8, która wprowadza kluczowe zmiany w sposobie działania i wydajności skryptu. Najważniejszą nowością jest pełna reaktywność dzięki zastosowaniu mechanizmu MutationObserver.

Co to oznacza w praktyce? Skrypt w czasie rzeczywistym monitoruje atrybuty data- przypisane do panelu bocznego. Jeśli zmienisz wartość odstępu (data-top-gap) lub szerokość mobilną (data-mobile-width) za pomocą JavaScriptu lub bezpośrednio w konsoli przeglądarki (F12), sidebar dostosuje swoje położenie natychmiast, bez konieczności odświeżania strony.

Najważniejsze zmiany w tej wersji:

• Optymalizacja 60 FPS: Przeniosłem logikę przeliczania pozycji do requestAnimationFrame, co drastycznie zmniejsza obciążenie procesora i zapewnia idealną płynność podczas szybkiego przewijania.
• Inteligentna inicjalizacja: Skrypt automatycznie uzupełnia brakujące atrybuty domyślnymi wartościami (0), co ułatwia debugowanie i sprawia, że struktura DOM jest bardziej przejrzysta.
• Nowy standard selektora: Wprowadziłem bardziej semantyczny atrybut data-sticky-sidebar (choć wsparcie dla starszego data-sticky="true" zostało zachowane).
• Poprawiona stabilność: Nowy proces bootowania skryptu lepiej radzi sobie z wolno ładującymi się obrazami i reklamami, które zmieniają wysokość strony po jej otwarciu.

Pełną listę zmian technicznych oraz historię rozwoju projektu znajdziesz w oficjalnym pliku: 👉 Zobacz CHANGELOG.md na GitHubie

Opis projektu:

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-sidebar.

Oto przykład:

<!DOCTYPE html>
<html>
  <body>
      <header></header>
          <div>
            <main></main>
            <aside data-sticky-sidebar></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.

Porównanie: CSS position: sticky vs Two Direction Sticky Sidebar

Zwykła właściwość CSS position: sticky jest świetna, jednak posiada ona istotne ograniczenia. Warto zauważyć, że poniższe zestawienie wyjaśnia kluczowe różnice, dzięki którym nasz projekt zapewnia lepsze doświadczenia użytkownika:

Najczęściej zadawane pytania o Two Direction Sticky Sidebar

1. Czy ten lekki skrypt JS obciąża stronę?

Absolutnie nie. Co więcej, skrypt został napisany w czystym JavaScript (Vanilla JS), dlatego nie wymaga on żadnych zewnętrznych bibliotek. Ponadto, dzięki wykorzystaniu requestAnimationFrame, obliczenia są wykonywane tylko wtedy, gdy jest to niezbędne.

2. Czy dwukierunkowy panel boczny działa na urządzeniach mobilnych?

Tak, ponieważ dzięki atrybutowi data-mobile-width masz pełną kontrolę nad responsywnością. Warto podkreślić, że jeśli szerokość ekranu spadnie poniżej ustalonej granicy, skrypt automatycznie przestanie działać, co w konsekwencji poprawia czytelność na małych urządzeniach.

3. Co się stanie, jeśli użytkownik zmieni rozmiar okna?

Skrypt automatycznie przelicza wszystkie wymiary. W związku z tym, każda zmiana rozmiaru okna lub zmiana atrybutu „w locie” jest natychmiast uwzględniana bez potrzeby odświeżania strony.

4. Czy skrypt jest bezpieczny dla SEO?

Tak. Skrypt modyfikuje jedynie warstwę wizualną (pozycjonowanie elementu) i nie ingeruje w treść strony ani strukturę nagłówków, więc jest w 100% bezpieczny dla robotów Google.

5. Czy mogę użyć wielu sidebarów na jednej stronie?

W obecnej wersji (1.8.8) skrypt został zoptymalizowany pod kątem obsługi jednego, głównego panelu bocznego, ponieważ jest to najczęstszy scenariusz spotykany na blogach i w portalach informacyjnych.

Two Direction Sticky Sidebar – Posumowanie

Two Direction Sticky Sidebar to prosty projekt napisany w JavaScript, umożliwiający wygodną nawigację po stronie internetowej. Nie wymaga użycia żadnych framework’ów, co pozytywnie wpływa na wydajność. Dzięki temu skryptowi użytkownicy mogą cieszyć się lepszym doświadczeniem podczas przeglądania treści online, ponieważ boczny panel nawigacyjny podąża za nimi, nawet gdy przewijają stronę.