# A ::stuck pseudo class hack

This is a pure CSS demo of how to mimic a `::stuck` pseudo class, allowing you to change the styling of a `position: sticky` element when it is in the 'stuck' state.

My requirement was no JS at all, so this is a pure HTML + CSS hack, that has two copies of the sticky header. One covers the other one, but does not stick itself so on scrolling it reveals the 'styled' version underneath.

Questions/suggestions to @TomAnthonySEO. :)

Blue box header. Italic when 'stuck'.
Blue box header. Italic when 'stuck'.

## Blue box

Green box header. Italic when 'stuck'.
Green box header. Italic when 'stuck'.

## Green box

Orange box header. Italic when 'stuck'.
Orange box header. Italic when 'stuck'.

## Orange box

Purple box header. Italic when 'stuck'.
Purple box header. Italic when 'stuck'.

## Purple box