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

Question

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

This will help: https://developers.google.com/web/updates/2017/09/sticky-headers — maganap, Sep 17 '19 at 22:21

score 1 · Accepted Answer · edited May 20 '21 at 13:54

1

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.

edited May 20 '21 at 13:54

Matt Dell

8,802
9
39
56

answered Jun 30 '16 at 12:42

adamk22

541
4
17

@Yako If you check the link I mentioned there are couple of JS code to choose from. – adamk22 Feb 18 '19 at 16:40
1

Just a quick note on browser support as the top comment is from 2017. Sticky is now well supported by browsers. ie11 is the only browser without support, and represents only 1% of global users at the time of writing. Sticky also degrades gracefully, so your best bet is to go for a css solution if it can fit your needs. See https://caniuse.com/?search=sticky – user2528534 Mar 16 '21 at 11:36

score -1 · Answer 2 · answered Jun 30 '16 at 12:45

Your best solution is probably to rely on a JavaScript scroll event. CSS has (limited) support for snap points, but that's the closest it has right now to any sort of scroll event support.

If your only concern with a JS solution is fluidity, I might suggest trying to apply CSS transitions to #mynav so that when the element is altered on scroll, there is a smoother visual cue that something is changing.

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

2 Answers2