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

Sticky menu dziwne zachowanie przy małej ilości tekstu

Aruba Cloud - Virtual Private Server VPS
0 głosów
270 wizyt
pytanie zadane 2 lipca 2020 w HTML i CSS przez Shiro Stary wyjadacz (10,300 p.)

Po przepracowaniu 3go odcinka kursu CSS o m.in. przyklejanym menu postanowiłem go dodać do pewnej strony, oto link: http://simon.cba.pl/

Jeżeli teksu (kafelek) jest dużo (kliknij lupę z + na górze po prawej aby kafelki zajmowały więcej miejsca) to wszystko działa, ale gdy jest inaczej to przy skrolowaniu strona wraca do góry.

Dlaczego tak się dzieje i jak można to naprawić?
CSS: http://simon.cba.pl/css/style.css

Dziękuje i pozdrawiam :)

komentarz 2 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)
Prawie na pewno nie jest za to odpowiedzialny CSS, mógłbyś więc podać link do całego kodu strony?
komentarz 2 lipca 2020 przez Shiro Stary wyjadacz (10,300 p.)
komentarz 2 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)
Nie działa..., możesz przez Gita?
komentarz 2 lipca 2020 przez Shiro Stary wyjadacz (10,300 p.)
komentarz 2 lipca 2020 przez Comandeer Guru (606,920 p.)
Niepotrzebnie wrzuciłeś do na dropboksa, bo link, który podałeś jak najbardziej działa – wystarczy go skopiować i wkleić w przeglądarce. Zresztą mając sam adres strony, można bez problemu podglądać jej źródło (prawy → Pokaż źródło strony albo Ctrl+U).
komentarz 2 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)
Strona nie jest jednoplikowa, więc Ctrl + U zadziała, ale będzie wyjątkowo nieporęczne, co do tego 1, rzeczywiście nie przyszło mi do głowy, że link zmienia protokół, ale i w tym przypadku, wygląda to tak jak za pośrednictwem Ctrl + U więc o wiele poręczniejszy jest dostęp do plików jako takich

2 odpowiedzi

+1 głos
odpowiedź 2 lipca 2020 przez eunstachy Stary wyjadacz (14,180 p.)
wybrane 2 lipca 2020 przez Shiro
 
Najlepsza

Sprawa jest bardzo prosta: 

Aby dobrze zrozumieć co się dzieje wstaw coś takiego w css

body {
  min-height: 200vh;
}

#container {
  margin-top: 100px;
}

Niepotrzebnie dodajesz klasę sticky w chwili scrollowania. Powoduje to, że belka w której jest zegar zostaje "oderwana" a kafelki które są pod nią wskakują na jej miejsce i są zasłonięte przez tą belkę. 

Tak więc jak już wcześniej wspominałem - niepotrzebnie dodajesz kalsę sticky przy scrollowaniu. Powinna być tam na stałe, a kafelki lub dowolny element poniżej powinien mieć odpowiedni margines górny aby nic na siebie nie nachodziło.

komentarz 2 lipca 2020 przez Shiro Stary wyjadacz (10,300 p.)
Dziękuje :))
0 głosów
odpowiedź 2 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)
Z tego co widzę, strona działa poprawnie, tylko w pewnym momencie ucina "animację scrolowania". Spróbuj całkowicie wyłączyć skrypty odpowiedzialne za zegar, czy problem wtedy dalej występuje? Jeśli nie, jest to wina pętli, która jest odpowiedzialna z zegar.
komentarz 2 lipca 2020 przez Shiro Stary wyjadacz (10,300 p.)
Niestety wyłączenie zegara nie pomaga :(

Trochę nie rozumiem, jeżeli zegar jest wyłączony to jak może być to wina pętli zegara?
komentarz 2 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)
edycja 2 lipca 2020 przez _Pita_

Jeżeli zegar jest wyłączony, i nadal tak jest, to na pewno nie jest to wina zegara (więc możesz go spokojnie przywrócić laugh)

Spróbuj po prostu do klasy tego menu dać "position: sticky" i nie modyfikować jej, Myśłę, że dzieje się tak, bo zmiana klasy powoduje, że suwak chce się przesunąć, ale kiedy to robi, menu się chowa, więc całość mieści się na jednej stronie, więc suwak wraca na górę (bo nie ma potrzeby być niżej, jeśli wszystko się mieści) 

Podobne pytania

+1 głos
1 odpowiedź 477 wizyt
pytanie zadane 8 sierpnia 2021 w HTML i CSS przez NA Użytkownik (590 p.)
+1 głos
0 odpowiedzi 462 wizyt
0 głosów
1 odpowiedź 998 wizyt
pytanie zadane 19 lutego 2017 w JavaScript przez Allen Obywatel (1,010 p.)

93,335 zapytań

142,331 odpowiedzi

322,415 komentarzy

62,670 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...