• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z menu sticky

VPS Starter Arubacloud
0 głosów
407 wizyt
pytanie zadane 14 marca 2018 w HTML i CSS przez Bembnias Początkujący (450 p.)
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.
komentarz 14 marca 2018 przez shotokan Nałogowiec (39,660 p.)

Jakbyś zapodał kod to by było fajnie smiley

2 odpowiedzi

+1 głos
odpowiedź 14 marca 2018 przez gremlin Dyskutant (7,600 p.)
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.
komentarz 15 marca 2018 przez Bembnias Początkujący (450 p.)
Dziękuję bardzo, zastosowałem pierwszy sposób i pomogło :)

Pozdrawiam.
0 głosów
odpowiedź 14 marca 2018 przez GaNdAlFf56 Początkujący (380 p.)
Hejka! moim zdaniem jest łatwiejszy sposób na sticky menu i to bez javascript.

W css wpisujesz:

position: sticky;
top: 0;

 

I działa :)
komentarz 15 marca 2018 przez pablop76 VIP (123,060 p.)

Ale wsparcie przeglądarek jeszcze kuleje.

komentarz 15 marca 2018 przez Bembnias Początkujący (450 p.)

@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 :/

komentarz 15 marca 2018 przez GaNdAlFf56 Początkujący (380 p.)
https://caniuse.com/#search=sticky

 

Safari też jest na zielono.

Podobne pytania

0 głosów
1 odpowiedź 308 wizyt
pytanie zadane 15 stycznia 2018 w HTML i CSS przez SzukającyPrzygód Bywalec (2,310 p.)
0 głosów
0 odpowiedzi 258 wizyt
pytanie zadane 9 kwietnia 2020 w JavaScript przez Whynotslave Początkujący (250 p.)
+1 głos
1 odpowiedź 327 wizyt
pytanie zadane 8 sierpnia 2021 w HTML i CSS przez NA Użytkownik (590 p.)

92,455 zapytań

141,263 odpowiedzi

319,100 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...