position: sticky funktioniert jetzt in einigen mobilen Browsern, sodass Sie eine Menüleiste mit der Seite scrollen lassen und dann immer dann oben im Ansichtsfenster bleiben können, wenn der Benutzer daran vorbeirollt.
Aber was ist, wenn Sie Ihre klebrige Menüleiste leicht neu gestalten möchten, wenn sie gerade "klebt"? Sie möchten beispielsweise, dass die Leiste beim Scrollen mit der Seite abgerundete Ecken aufweist. Sobald sie jedoch am oberen Rand des Ansichtsfensters haftet, möchten Sie die oberen abgerundeten Ecken entfernen und einen kleinen Schlagschatten darunter hinzufügen es.
Gibt es irgendeine Art von Pseudoselektor (z. B. ::stuck
) für Zielelemente, die haben position: sticky
und derzeit hängen bleiben? Oder haben Browser-Anbieter so etwas in der Pipeline? Wenn nicht, wo würde ich es anfordern?
NB. Javascript-Lösungen sind dafür nicht geeignet, da auf Mobilgeräten normalerweise nur ein einziges scroll
Ereignis angezeigt wird, wenn der Benutzer seinen Finger loslässt, sodass JS nicht genau wissen kann, wann der Bildlaufschwellenwert überschritten wurde.
quelle
position
Eigenschaften eines:stuck
Selektors ignoriert werden sollten? (Eine Regel für Browser-Anbieter, meine ich, ähnlich den Regeln, wieleft
Vorrang vorright
usw. hat)):stuck
, die dentop
Wert von0
auf ändert300px
und dann nach unten scrollt150px
... sollte sie bleiben oder nicht? Oder denken Sie an ein Element mitposition: sticky
undbottom: 0
wo sich das:stuck
möglicherweise ändertfont-size
und daher die Größe des Elements (wodurch sich der Moment ändert, in dem es bleiben sollte) ...while
Zyklus schlecht gestaltet ist, weil er eine Endlosschleife zulässt :) Aber danke, dassIn einigen Fällen kann ein Einfacher
IntersectionObserver
den Trick tun, wenn die Situation es erlaubt, an ein oder zwei Pixeln außerhalb seines Stammcontainers festzuhalten, anstatt richtig gegen ihn zu spülen. Auf diese Weise schießt der Beobachter, wenn es direkt hinter dem Rand sitzt, und wir rennen los.Stecke das Element mit aus dem Container
top: -2px
und ziele dann über dasstuck
Attribut ...Beispiel hier: https://codepen.io/anon/pen/vqyQEK
quelle
stuck
Klasse besser wäre als ein benutzerdefiniertes Attribut ... Gibt es einen bestimmten Grund für Ihre Wahl?padding-top: 60px
in Ihrem Fall :)Jemand im Google Developers-Blog behauptet, mit einem IntersectionObserver eine performative JavaScript-basierte Lösung gefunden zu haben .
Relevantes Codebit hier:
Ich habe es nicht selbst repliziert, aber vielleicht hilft es jemandem, über diese Frage zu stolpern.
quelle
Nicht wirklich ein Fan von js-Hacks zum Stylen von Dingen (z. B. getBoudingClientRect, Scroll-Listening, Größenänderung beim Listening), aber so löse ich derzeit das Problem. Diese Lösung hat Probleme mit Seiten mit minimierbarem / maximierbarem Inhalt (<Details>) oder verschachteltem Scrollen oder wirklich irgendwelchen Kurvenbällen. Davon abgesehen ist es eine einfache Lösung, wenn das Problem ebenfalls einfach ist.
quelle
if (requestedFrame) { return; }
Aufgrund der Stapelverarbeitung von Animationsframes ist dies kein "Performance-Killer". Intersection Observer ist jedoch immer noch eine Verbesserung.Ein kompakter Weg, wenn Sie ein Element über dem
position:sticky
Element haben. Es legt das Attribut fest, mitstuck
dem Sie in CSS übereinstimmen könnenheader[stuck]
:HTML:
JS:
quelle