Come fare per - Immagine adesiva
Scopri come creare un'immagine adesiva con CSS.
Immagine appiccicosa
Nota: questo esempio non funziona in Internet Explorer o Edge 15 e versioni precedenti.
Immagine appiccicosa
Esempio
img.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Un elemento con position: sticky;
viene posizionato in base alla posizione di scorrimento dell'utente.
Un elemento permanente alterna tra relative
e fixed
, a seconda della posizione di scorrimento. Viene posizionato in modo relativo fino a quando una determinata posizione di offset non viene raggiunta nella finestra, quindi "si attacca" in posizione (come position:fixed).
Nota: Internet Explorer, Edge 15 e versioni precedenti non supportano il posizionamento permanente. Safari richiede un prefisso -webkit- (vedi esempio sotto). È inoltre necessario specificare almeno uno di top
, right
, bottom
o left
affinché il posizionamento adesivo funzioni.
Per saperne di più sul posizionamento CSS, leggi il nostro tutorial sulla posizione CSS .
Per saperne di più su come applicare uno stile alle immagini, leggi il nostro tutorial Immagini CSS .