position:sticky : Adding style when the element detaches from normal flow

Issue

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

Solution

Unfortunately, as far as I know there are no pseudo class that targets the 'sticky' state.

See post: Targeting position:sticky elements that are currently in a 'stuck' state

An alternative would be to use jQuery to add or remove a class/css styling when it reaches the element that needs to be stickied.

Answered By - adamk22