Bardzo możliwe, że jeśli przyszło Ci kiedyś pracować z przyklejoną nawigacją oraz linkami, prowadzącymi nie do innego widoku lub podstrony, ale do konkretnego miejsca na stronie, to spotkał_ś się z tego rodzaju problemem:
Spróbuj kliknąć w którykolwiek z linków w nawigacji i zobacz co się stanie - odnośnik przeniesie Cię do odpowiedniego nagłówka artykułu, ale w taki sposób, że sam nagłówek, do którego link prowadzi, zostanie zakryty przez sticky menu na górze okna przeglądarki!
Psst! Jeśli wolisz oglądać, niż czytać, to ten artykuł ma też wersję wideo!
A takie zachowanie, na pewno nie jest czymś, czego oczekujesz - nagłówek powinien być widoczny, a widok artykułu powinien zatrzymać się nad samym nagłówkiem lub inną sekcją, do której prowadzi link.
W artykule tym, nie będę skupiać się na kodzie przykładu, bo zapewnia on głównie sensowny wygląd, a nie jest związany bezpośrednio z naszym problemem. Wspomnę natomiast tylko o jednej właściwości -
scroll-behavior: smooth, która zapewnia płynne przechodzenie do konkretnej kotwicy.Jeśli spotykasz się z nią po raz pierwszy lub nie wiesz jak dokładnie działa, to więcej dowiesz się na pewno w moim artykule: Płynne przewijanie strony, do wskazanego punktu – 3 świetne sposoby 🚀
Jak rozwiązać ten problem?
Wiele osób, radzi sobie z nim tak, że dane id, do którego prowadzi link, dodaje do elementu wypozycjonowanego relatywnie i przesuniętego do góry o wysokość nawigacji.
Tak jak na tym przykładzie:
Ale jak łatwo się domyślić, nie jest to dobre rozwiązanie - szczególnie gdy spojrzymy z perspektywy dostępności oraz czytelności naszego kodu :c
Na szczęście jest lepsze rozwiązanie!
A jest nim jedna właściwość w CSSie, którą dodajemy do elementu zawierającego w sobie id, będącego jednocześnie naszą kotwicą.
Właściwość ta, to:
scroll-margin-top: var(--nav-height);
Tak jak sugeruje nazwa zmiennej, jej wartością może być wysokość naszej nawigacji (lub jakakolwiek inna wartość), dzięki czemu górna krawędź okna przeglądarki, po przeniesieniu nas do kotwicy, znajdzie się o wysokość nawigacji wyżej niż normalnie.
A tym samym początek zawartości, do której wspomniana kotwica prowadzi, zacznie się z końcem naszej przyklejonej nawigacji.
I to tyle!
Wystarczy dodać tę właściwość do wszystkich elementów, do których prowadzą kotwice na tworzonej przez nas stronie, na przykład:
section,
article,
h1,
h2,
h3,
h4,
h5,
h6 {
scroll-margin-top: var(--nav-height);
}
...albo dodać ją do wszystkich elementów z atrybutem id:
*[id] {
scroll-margin-top: var(--nav-height);
}
...lub najlepiej - ustawić ją dla pseudo-klasy :target:
*:target {
scroll-margin-top: var(--nav-height);
}
Przy okazji!
Właściwość, której tutaj używam, nie tylko pozwala radzić sobie z opisanym problemem, ale również umożliwia przesunięcie tzw. scroll snappingu - punktu, w którym jesteśmy w stanie zatrzymać scroll użytkownika, gdy ten przestanie przewijać naszą witrynę.
Więcej poczytać możesz o niej na przykład w dokumentacji MDN.
Interesujesz się front-endem lub programowaniem ogólnie?
Podsyłam tam wartościowe materiały ze świata front-endu, produktywności, programowania ogólnie, oraz tego bloga.
I swoją drogą - jeśli przed zapisem chcesz zobaczyć przykładowe wydanie newslettera, to znajdziesz je na stronie poświęconej newsletterowi ogólnie.
I mamy to!
Od tego momentu, nasza nawigacja nie przykrywa początku sekcji, do jakiej dany link prowadzi:
Mam nadzieję, że dzięki temu krótkiemu artykułowi, już nigdy nie będziesz zmagać się tym wyzwaniem! 🔥
