position: Sticky działa teraz w niektórych przeglądarkach mobilnych, więc możesz przewijać pasek menu wraz ze stroną, a następnie trzymać się górnej części widoku, gdy użytkownik przewinie obok niego.
Ale co, jeśli chcesz nieco zmienić styl swojego przyklejonego paska menu, gdy obecnie się „przykleja”? np. możesz chcieć, aby pasek miał zaokrąglone rogi za każdym razem, gdy przewija się wraz ze stroną, ale gdy tylko przylgnie do górnej części widoku, chcesz pozbyć się górnych zaokrąglonych rogów i dodać trochę cienia pod spodem to.
Czy istnieje jakiś rodzaj pseudoselektora (np. ::stuck
) Do wskazywania elementów, które mają position: sticky
i obecnie się trzymają? A może dostawcy przeglądarek mają coś takiego w przygotowaniu? Jeśli nie, gdzie mam o to poprosić?
NB. Rozwiązania javascript nie są do tego dobre, ponieważ na urządzeniach mobilnych zwykle otrzymujesz tylko jedno scroll
zdarzenie, gdy użytkownik puści palec, więc JS nie może znać dokładnego momentu przekroczenia progu przewijania.
źródło
position
właściwości:stuck
selektora powinny być ignorowane? (chodzi mi o regułę dla dostawców przeglądarek, podobną do zasad dotyczących tego, jakleft
ma pierwszeństworight
itp.)):stuck
że zmieniatop
wartość z0
na300px
, a następnie przewiń w dół150px
... czy ma się trzymać, czy nie? Albo pomyśl o elemencie zposition: sticky
ibottom: 0
gdzie:stuck
być może zmienia się,font-size
a tym samym rozmiar elementów (a więc zmieniając moment, w którym powinien się przykleić) ...while
cykl jest źle zaprojektowany, bo pozwala na nieskończoną pętlę :) Jednak dzięki za wyjaśnienie tego;)W niektórych przypadkach prosty
IntersectionObserver
może załatwić sprawę , jeśli sytuacja pozwala na przyklejanie się do jednego lub dwóch pikseli poza jego głównym pojemnikiem, a nie na prawidłowe wyrównanie. W ten sposób, gdy znajduje się tuż za krawędzią, obserwator strzela, a my ruszamy i uciekamy.Umieść element tuż poza jego kontenerem za pomocą
top: -2px
, a następnie kieruj za pomocąstuck
atrybutu ...Przykład tutaj: https://codepen.io/anon/pen/vqyQEK
źródło
stuck
klasa byłaby lepsza niż atrybut niestandardowy… Czy jest jakiś konkretny powód twojego wyboru?padding-top: 60px
w twoim przypadku :)Ktoś na blogu Google Developers twierdzi, że znalazł wydajne rozwiązanie oparte na JavaScript z IntersectionObserver .
Odpowiedni bit kodu tutaj:
Sam tego nie powielałem, ale może pomaga to komuś natknąć się na to pytanie.
źródło
Nie jestem fanem używania hacków js do stylizacji rzeczy (np. GetBoudingClientRect, słuchanie przewijania, słuchanie zmiany rozmiaru), ale w ten sposób obecnie rozwiązuję problem. To rozwiązanie będzie miało problemy ze stronami, które mają zawartość, którą można zminimalizować / zmaksymalizować (<szczegóły>) lub zagnieżdżone przewijanie, lub w ogóle jakiekolwiek krzywe kulki. To powiedziawszy, jest to proste rozwiązanie, gdy problem jest również prosty.
źródło
if (requestedFrame) { return; }
To nie jest „zabójca wydajności” z powodu grupowania klatek animacji. Intersection Observer to jednak wciąż ulepszenie.Kompaktowy sposób, gdy masz element nad
position:sticky
elementem. Ustawia atrybut,stuck
który możesz dopasować w CSS zheader[stuck]
:HTML:
JS:
źródło