element z fixed zasłania inny

Question

Cześć,

Mam menu z position: fixed i wysokością 60px. W nim linki z kotwicami: <a href="#cos"></a>.
Mam sekcje które są elementami docelowymi tych linków.

Problem jest taki, że gdy użyję linku to sekcja idzie do samej góry przeglądarki (wiadomo hah) i menu zasłania 60 pikseli tej sekcji. Jak mogę to naprawić? Padding-top: 60px dla sekcji odpada.

Comments

Pokaż kod, wrzuć na codep albo coś innego

---

Jutro wrzucę, bo nie ma mnie już na kompie.

---

https://codepen.io/anon/pen/VrbWab

Proszę. Uproszczony ale wszystko zachowane

Answer 1

Witam.

Po prostu odejmujesz od .offset().top - wyskość menu  czyli  w twoim przypadku  .offset().top - 60

Comments

Przykro mi, ale nie zrobiłem tego w jq i jak na razie nie mam zamiaru. Proszę o wskazówki z użyciem samego html i css.

---

@pablop76,
 Dziękuję bardzo mi pomogło :)

Answer 2

Padding jest najprostszym rozwiązaniem, ale jeśli nie wchodzi w grę to musiałbyś się pobawić Javascriptem i zrobić np. autoukrywanie navbaru, gdy scroll idzie w dół lub cofnąć scroll o te 60px za każdym razem, gdy użyty jest link z kotwicą.

A może masz możliwość po prostu przenieść kotwice z sekcji na jakieś nagłówki, które mogą mieć padding?

Answer 3

padding-top: 60px;
margin-top: -60px;

Wizualnie nic się nie zmienia, więc myślę, że argument "padding odpada", jest nieuzasadniony.
https://jsfiddle.net/rb8j5x2L/