PROJET AUTOBLOG


le hollandais volant links

Site original : le hollandais volant links

⇐ retour index

Mise à jour

Mise à jour de la base de données, veuillez patienter...

Fixed Headers, On-Page Links, and Overlapping Content, Oh My! | CSS-Tricks

jeudi 4 avril 2019 à 17:08

C’est un problème familier : quand on utilise des ancres dans les pages et qu’on a un menu (header) fixe, l’ancre peut être caché sous le menu quand on clic dessus.

Il y a une nouvelle propriété CSS qui permet de dire au navigateur que la zone de scroll doit recevoir une marge intérieure, égale à la hauteur du menu fixe par exemple :

body {
  scroll-padding-top: 70px; /* height of sticky header */
}

Ça ne marche que dans Chrome pour l’instant.

Pour les autres navigateurs, j’avais mis au point ceci : https://codepen.io/lehollandaisvolant/pen/JOOQeq (à l’aide d’un ::before et d’une marge négative).


— (permalink)