Il posizionamento sticky combina aspetti sia del posizionamento relativo che di quello fisso. Quando un elemento è posizionato come sticky, si comporta come un elemento posizionato relativamente fino a quando non raggiunge una certa soglia nella pagina. A quel punto, passa a comportarsi come un elemento posizionato in modo fisso.

position: sticky;

Consideriamo la seguente illustrazione. L'elemento con il contenuto di testo I am sticky utilizza il posizionamento sticky.

Quando un elemento si trova all'interno di un contenitore, e il contenitore rimane all'interno della viewport, l'elemento si comporta come se fosse posizionato relativamente. Tuttavia, quando una parte del contenitore padre esce dalla viewport, l'elemento rimane fisso finché una parte del contenitore è ancora visibile sullo schermo. Una volta che l'intero contenitore esce dalla viewport, il posizionamento relativo viene riattivato e l'elemento scompare dalla vista insieme al contenitore.

Procedere con la pratica creando alcune sezioni con titoli sticky. In questo modo, l'utente potrà sempre visualizzare il titolo della sezione che sta leggendo, che poi scomparirà durante lo scorrimento.

Nota

È importante menzionare che è necessario specificare la proprietà top o bottom, affinché il browser possa capire dove ci aspettiamo che l'elemento rimanga bloccato.