Problem z menu sticky

Question

Witam,

Mam taki mały(duży) problem z moim menu sticky które stworzyłem według poradnika pana Mirosława,
Rozwiązanie niby działa tak jak ma działać; menu się przylepia, ale robi to skokowo i tutaj pojawia się problem, w głównej mierze estetyczny, ponieważ owe menu przeskakuje mi w dół o 80px; (wysokość samego menu).

Jeżeli ktoś wie jak się pozbyć takiego skokowego przewinięcia i zamienić je na płynne przyczepienie się do górnej krawędzi to proszę o pomoc.

Comments

Jakbyś zapodał kod to by było fajnie

Answer 1

Z kodem byłoby łatwiej ale spróbuję zgadnąć.

Podejrzewam, że to nie samo menu idzie w dół tylko cała treść która była pod nim idzie w górę jak słusznie zauważyłeś o wysokość menu. Dzieje się tak dlatego, że ustawiając pozycję fixed dla menu wyrywasz go z układu strony i tworzy się tam puste miejsce w które wskakuje następny element.

Rozwiązaniem może być np. stworzenie kontenera dla samego menu o wymiarach menu (czyli div o wysokości takiej samej jak menu) w którym będzie się ono znajdowało, wtedy odrywające się menu nie zostawi pustej przestrzeni bo zostanie tam jego kontener z wymiarami takimi jak menu.

Drugim sposobem może być dodanie elementowi który jest pod menu w momencie przyklejenia margin-top równy wysokości menu i cofnięcie tego marginu w momencie odklejenia menu.

Pozdrawiam.

Comments

Dziękuję bardzo, zastosowałem pierwszy sposób i pomogło :)

Pozdrawiam.

Answer 2

Hejka! moim zdaniem jest łatwiejszy sposób na sticky menu i to bez javascript.

W css wpisujesz:

position: sticky;
top: 0;

 

I działa :)

Comments

Ale wsparcie przeglądarek jeszcze kuleje.

---

@GaNdAlFf56,

Dziękuję za odpowiedz :)
Znam ten sposób, ale właśnie tak jak napisał pablop76, wsparcie przeglądarek kuleje.
Działa na: Chrome, Firefox, Edge, Opera, ale nie na Safari co jest dużym minusem :/

---

https://caniuse.com/#search=sticky

 

Safari też jest na zielono.