Position: sticky
position: sticky è un ibrido tra relative e fixed. L'elemento scorre normalmente fino a raggiungere una soglia, poi diventa fisso.
Sintassi
.sticky-header {
position: sticky;
top: 0; /* Diventa fisso quando raggiunge top: 0 */
background: white;
z-index: 100;
}Casi d'uso comuni
- Header che rimane visibile durante lo scroll
- Sidebar che segue il contenuto
- Intestazioni di tabella fisse
Requisiti
- Deve avere almeno una proprietà top, right, bottom o left
- Il contenitore padre non deve avere overflow: hidden
- L'elemento deve avere spazio per scorrere nel contenitore