Position: sticky: Stil Hinzufügen, wenn das Element aus dem normalen Fluss ablöst

Question

Lassen Sie uns ein einfaches Beispiel nehmen:

<nav id="#mynav">MY NAVBAR</nav> 

und einen grundlegenden Stil:

#mynav { 
    position : sticky; 
} 

Ich möchte folgende Styling anwenden Informationen zu meiner Navbar nur wenn es sich vom normalen Fluss löst, um es visuell vom Hauptinhalt zu trennen (mit einem Schatten in diesem Fall)

box-shadow : 0px 10px 15px 0px rgba(0,0,0,0.75); 

Gibt es eine Art von Pseudo-Klasse oder Media-Abfrage-ähnliche Sache, die ich dafür verwenden könnte? Z.B .:

#mynav:some-pseudo-class { 
    box-shadow : 0px 10px 15px 0px rgba(0,0,0,0.75); 
} 

Ich weiß, es gibt gute Plugins für diese, aber alle von ihnen scheinen nicht in der Lage zu sein, es zu implementieren whithout die (ganz neu) nativen Funktion position:sticky umgangen wird. Stattdessen tun sie es auf eine altmodische Weise (scroll-Ereignis und position:fixed; top:0).

Also, ist es möglich, es mit position:sticky zu tun, und ohne die Verwendung des scroll Ereignis, das die Flüssigkeit der Seite verlangsamt (ich bin nicht gegen Javascript, aber Scroll-Ereignis ist zu langsam)?

Answer 1

Leider, soweit ich weiß, gibt es keine Pseudo-Klasse, die auf den "klebrigen" Zustand abzielt.

Siehe Beitrag: Targeting position:sticky elements that are currently in a 'stuck' state

Eine Alternative wäre jQuery zu verwenden, um eine Klasse/CSS Styling hinzuzufügen oder zu entfernen, wenn sie das Element erreicht, das sein stickied muss.

Edit:

Auf einer anderen Anmerkung, 'Position: klebrig;' wird aufgrund der geringen browserübergreifenden Unterstützung nicht empfohlen. Siehe http://caniuse.com/#search=sticky. Besser in diesem Fall mit jQuery bleiben :-)

Answer 2

Ihre beste Lösung ist wahrscheinlich auf ein JavaScript-Scroll-Ereignis zu verlassen. CSS hat (begrenzte) Unterstützung für Fangpunkte, aber das ist die nächste, die es jetzt für jede Art von Scroll-Ereignis-Unterstützung hat.

Wenn Ihre einzige Sorge mit einer JS-Lösung Fluidität ist, kann ich vorschlagen, CSS-Übergänge auf #mynav anzuwenden, so dass bei der Änderung des Elements beim Scrollen ein glatterer visueller Hinweis entsteht, dass sich etwas ändert.