Sådan oprettes: Fast sidetitel ved rulning

Lær hvordan du bruger CSS og JavaScript til at oprette en fast/limhæftende sidetitel ved rulning.

Prøv det selv

Opret en fast sidetitel ved rulning

Første trin - Tilføj HTML：

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

Andet trin - Tilføj CSS：

Indstil sidetitslens stil; tilføj position: sticky og top: 0, så sidetitslen forbliver fast, når den rulles til toppen. 
.header {
  position: sticky;
  top: 0;
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

Prøv det selv

elementet sættes til position: sticky; derefter bestemmes deres position baseret på brugerens rulning.

Fastgjorte elementer skifter mellem relativ og fast position baseret på rulningens position. Før de når den angivne afstand i visningen, forbliver de relativt placeret; når de når det, position: fixed lige så）.

Bemærk:For at gøre fastgørelse effektivt, skal du mindst specificere øverst、højre、nederst eller venstre 中的一个。

Related pages

Tutorial:CSS position