Un’intestazione fissa, o sticky header, è un componente comune del design di un sito web. Come suggerisce il nome, rimane nello stesso posto mentre si scorre la pagina. Questo aspetto può dare un senso di coerenza e facilitare la navigazione.
Ecco come puoi creare un’intestazione fissa con CSS:
Utilizzerai la proprietà `position: fixed;` per ottenere un’intestazione fissa. Ecco un esempio di base:
```
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #f8f9fa;
padding: 20px 0;
}
```
Nell’esempio precedente, abbiamo utilizzato `position: fixed;` per posizionare l’intestazione in cima alla pagina. Inoltre, `top: 0;` e `left: 0;` significa che dovrebbe essere allineata con l’angolo in alto a sinistra della finestra di visualizzazione. infine, `width: 100%;` significa che dovrebbe estendersi per tutta la larghezza della finestra di visualizzazione.
Quindi, supponendo di avere il seguente HTML:
```
L’intestazione rimarrà in cima allo schermo mentre si scorre la pagina.
Vale la pena notare, tuttavia, che quando si utilizza `position: fixed;`, l’elemento verrà rimosso dal flusso del documento, il che significa che gli altri elementi non lo “vedranno” e si comporteranno come se non fosse lì. Pertanto, potrebbe essere necessario aggiungere un po’ di margine agli elementi successivi per evitare che finiscano sotto l’intestazione.
