Come creare: intestazione fissa durante lo scorrimento

Impara come creare un intestazione fissa o adesiva durante lo scorrimento utilizzando CSS e JavaScript.

Prova a farlo tu stesso

Creare un intestazione fissa durante lo scorrimento

Primo passo - Aggiungi HTML:

<div class="header" id="myHeader">
  <h2>My Header</h2>
</div>

Secondo passo - Aggiungi CSS:

impostare lo stile della testata; aggiungere position: sticky e top: 0 per mantenere la testata fissa quando scorri alla cima. 
.header {
  position: sticky;
  top: 0;
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

Prova a farlo tu stesso

impostare l'elemento come position: sticky; dopo, la sua posizione viene determinata dalla 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 vista, mantiene il posizionamento relativo; raggiunta, si attacca a quella posizione (come position: fixed ）。

Attenzione:Per attivare la posizionamento adesivo, devi specificare almeno superiore、destra、inferiore o sinistra 中的一个。

Pagine correlate

Tutorial:Position CSS