Header sticky: position: sticky in CSS e scomparsa allo scroll
Guida all'header sticky
Header sticky in CSS: position sticky, riduzione, scomparsa allo scroll | We.Inc
Crea un header sticky con position: sticky, poi aggiungi la riduzione e la scomparsa allo scroll. Demo dal vivo, offset delle ancore con scroll-margin, correzioni di z-index e un piccolo hook React.
Assegna all'header position: sticky e top: 0, più uno sfondo e uno z-index, e resterà fisso mentre la pagina scorre. Resta attaccato solo dentro il suo elemento padre, e un antenato con overflow impostato può bloccarlo. Per un header che si nasconde allo scroll, attiva e disattiva una classe con translateY da un listener di scroll.
sticky e fixed a confronto per gli header
position: sticky
position: fixed
Occupa spazio nel layout
Sì
No, aggiungi padding al body
Fissato rispetto a
L'antenato scorrevole più vicino
Il viewport
Richiede un inset come top: 0
Sì, altrimenti si comporta come relative
Di solito
Crea uno stacking context
Sì
Sì
Si ferma alla fine del padre
Sì
No
Gli header sticky sono una riga di CSS, finché qualcosa non va storto: l'header non resta attaccato, i link alle ancore finiscono sotto di esso o un menu a tendina scivola dietro il contenuto. Questa pagina spiega la riga di CSS e poi ciascuno di questi problemi, con una demo di scroll dal vivo in cui puoi passare tra le modalità semplice, riduzione e scomparsa.
Scorri dentro il riquadro della demo. L'header è sticky rispetto a quel riquadro, proprio come un header reale resta attaccato alla pagina.
Passa alla modalità riduzione o scomparsa allo scroll e scorri di nuovo in entrambe le direzioni.
Fai clic su un link di sezione nella demo per vedere scroll-margin-top tenere il titolo lontano dall'header.
Copia il CSS e l'hook corrispondenti alla modalità che vuoi.
Se sticky non fa nulla, cerca un antenato con overflow: hidden, auto o scroll. L'header resta attaccato a quel riquadro invece che alla pagina.
Un elemento sticky non può uscire dal suo padre. Metti l'header direttamente nel body o in un wrapper alto quanto la pagina.
Dai all'header uno sfondo pieno o leggermente traslucido, altrimenti il contenuto si vedrà attraverso durante lo scroll.
Imposta scroll-padding-top su html pari all'altezza dell'header, così ogni link ad ancora ed elemento con focus si ferma sotto di esso.
Rispetta la riduzione del movimento: salta l'animazione di scorrimento per chi ha chiesto meno movimento.
Domande frequenti
Perché il mio position: sticky non funziona?
Tre cause tipiche: nessun valore di inset come top: 0, un padre che finisce subito dopo l'header e quindi non lascia spazio per restare attaccato, oppure un antenato con overflow diverso da visible, che diventa il riquadro a cui l'header si attacca. Controllale in quest'ordine.
Un header deve essere sticky o fixed?
Sticky è più semplice perché mantiene il suo posto nel layout, così niente salta sotto di esso in cima alla pagina. Fixed è utile quando l'header deve stare sopra una hero a schermo intero, ma in quel caso il padding alla pagina lo aggiungi tu.
Come evito che i link alle ancore finiscano sotto un header sticky?
Aggiungi scroll-padding-top al contenitore che scorre, di solito html, pari all'altezza dell'header. Per singole destinazioni puoi invece mettere scroll-margin-top direttamente sul titolo.
Perché il mio menu a tendina appare dietro il contenuto della pagina?
Il posizionamento sticky crea uno stacking context, quindi tutto ciò che sta dentro l'header può sovrapporsi solo al suo interno. Alza l'header stesso con uno z-index superiore al contenuto successivo, per esempio z-index: 50, invece di alzare il menu a tendina.
Come funziona davvero sticky
Un elemento sticky parte nel flusso normale. Quando lo scroll lo porterebbe oltre il suo inset, top: 0 per un header, mantiene quella posizione finché non arriva il fondo del suo padre a spingerlo via.
Il riquadro a cui si attacca è l'antenato più vicino con un meccanismo di scroll, e questo include overflow: hidden. Ecco perché un wrapper aggiunto per ritagliare un carosello può rompere silenziosamente un header lontano da esso.
Nascondi scorrendo in giù, mostra scorrendo in su
Confronta la posizione di scroll attuale con l'ultima. Scendere oltre una piccola soglia nasconde l'header con transform: translateY(-100%); qualsiasi movimento verso l'alto lo fa tornare.
Anima transform invece di top o height, perché una trasformazione non scatena il layout. Ascolta lo scroll con l'opzione passive, così il browser non aspetta mai il tuo handler.
Ridurre senza salti nel layout
Cambiare l'altezza dell'header mentre è sticky sposta il contenuto sottostante. Mantieni fissa l'altezza esterna e riduci il logo con transform: scale, oppure riduci il padding dentro un header che è già fuori dai piedi.
Un attributo data come data-scrolled sull'header mantiene le regole di stile nel CSS e riduce lo script a una sola riga.
L'header sticky di base
Header sticky dentro una pagina che scorre
Scorri il riquadro. L'header resta in cima e il link all'ancora si ferma sotto di esso grazie a scroll-padding-top.
Nascondi scorrendo in giù, mostra scorrendo in su
CSS per gli stati nascosto e ridotto
Lo script imposta solo attributi data. Ogni cambiamento visivo vive nel CSS.
Hook React: useHideOnScroll
Restituisce due booleani che puoi applicare all'header come attributi data. La soglia di 8px ignora i piccoli tremolii.
Le insidie dell'header sticky
Sintomi e soluzioni
Sintomo
Causa
Soluzione
L'header scorre via
Nessun valore top
Aggiungi top: 0
L'header scorre via
Un antenato ha overflow: hidden
Sposta overflow su un wrapper più piccolo, oppure usa overflow: clip
Resta attaccato, poi se ne va troppo presto
Il padre è corto
Metti l'header nel body o in un wrapper a tutta altezza
Titoli delle ancore nascosti
Nessun offset di scroll
scroll-padding-top su html
Il menu va dietro il contenuto
Stacking context dell'header troppo basso
z-index sull'header stesso
Il contenuto si vede attraverso
Sfondo trasparente
Dai all'header un colore di sfondo
Sticky semplice
Riduzione
Scomparsa allo scroll
Introduzione
Funzionalità
Prezzi
Contatti
Demo di scroll dal vivo
Passa tra semplice, riduzione e scomparsa allo scroll, poi scorri dentro il riquadro.