Ajouter une ombre lors du scroll. Sans JS.

Certaines pages mettent une ombre sous l’entête (qui est fixe) seulement lors du scroll du contenu principal. C’est généralement fait en JS en détectant la position du scroll.

Ici, pas de JS, juste du CSS.

C’est réalisé par une astuce et des pseudo-éléments.

L’ombre est attachée au ::after de l’en-tête.

Quand on scroll le contenu principal, ce qui se passe, c’est que c’est comme une fenêtre coulissante : le contenu qui scrolle en haut est toujours là, juste caché sous l’en-tête et invisible.

À ça, j’ajoute un masque : ce masque est un ::before sous la partie qui scrolle. Le ::before scrolle avec la page.
Quand la page est en haut, le ::before est visible (pas masqué). Quand la page scrolle, le ::before est caché.

Ensuite, il suffit d’utiliser les bons z-index : le masque est au dessus de l’ombre, mais en dessous de l’en-tête. Comme ça, quand il est visible, il masque l’ombre.
Quand on scroll, le masque disparaît sous l’en-tête et l’ombre devient visible.

— (permalink)