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

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.)

Jasne, view-source:http://simon.cba.pl/

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.)

A to pójdzie?
https://www.dropbox.com/s/ey82j6p7a1rqv4k/WEB.rar?dl=1

komentarz 2 lipca 2020 przez Comandeer Guru (601,590 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

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 :))

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ć )

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)