Let's take take a simple example:
<nav id="#mynav">MY NAVBAR</nav>
and a basic style:
#mynav {
position : sticky;
}
I would like to apply the following styling information to my navbar only when it detaches from the normal flow, in order to visually split it from the main content (with a shadow in this case)
box-shadow : 0px 10px 15px 0px rgba(0,0,0,0.75);
Is there some kind of pseudo-class or media-query-like thing I could use for that? E.g.:
#mynav:some-pseudo-class {
box-shadow : 0px 10px 15px 0px rgba(0,0,0,0.75);
}
I know there are good plugins for this, but all of them seem to be unable to implement it whithout bypassing the (quite new) native feature position:sticky
. Instead, they do it in an old-fashion way (scroll event, and position:fixed; top:0
).
So, is it possible to do it using position:sticky
, and without using the scroll
event, which slows down the fluidity of the page (I'm not against javascript, but scroll event is too slow)?