Se avete creato dei siti web che utilizzavano degli sticky header, allora probabilmente avrete riscontrato questo problema: quando visitiamo un link che rimanda ad un punto della pagina dove sarebbe necessario scrollare la finestra, la sezione che volevamo visitare finisce con l’essere nascosta dall’header!
Qui potete vederne un esempio:
Come potete notare, quando premiamo sul link, il testo che volevamo vedere risulta nascosto dall’header. Come possiamo risolvere il problema?
Per nostra fortuna, è stata aggiunta una proprietà css che fa proprio al caso nostro: scroll-padding 🥳
E’ sufficiente indicare uno scroll-padding-top per la nostra pagina che sia delle stesse dimensioni del nostro header. Nel caso sopra:
html {
scroll-padding-top: 2rem;
}Ecco il risultato:
Per ulteriori informazioni potete visitare la pagina di MDN al riguardo.