Come creare: Elementi adesivi

Impara come creare elementi adesivi utilizzando CSS.

Prova personalmente

Attenzione:Questo esempio non è applicabile a Internet Explorer o Edge 15 e versioni precedenti.

Elementi adesivi

Esempio

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Prova personalmente

Gli elementi con position: sticky; si posizionano in base alla posizione di scorrimento dell'utente.

Gli elementi adesivi passano tra posizionamento relativo e fisso in base alla posizione di scorrimento. Fino a raggiungere la posizione di offset specificata nella viewport, rimane posizionato relativamente, poi si attacca in loco (come position:fixed).

Attenzione:Internet Explorer, Edge 15 e versioni precedenti non supportano la posizionamento adesivo. Safari richiede il prefisso -webkit- (vedi gli esempi di seguito). Per rendere il posizionamento adesivo efficace, è necessario specificare almeno uno tra top, right, bottom o left.

Pagine correlate

Tutorial:Posizionamento CSS