Hoe te maken: vastgehecht titel tijdens het scrolen

Leer hoe je een vasthechtende/verzadigende titel tijdens het scrolen kunt maken met CSS en JavaScript.

Probeer het zelf uit

Maak een vastgehecht titel tijdens het scrolen

Stap 1 - Voeg HTML toe:

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

Stap 2 - Voeg CSS toe:

Stel de stijl van de hoofding in; voeg position: sticky en top: 0 toe om ervoor te zorgen dat de hoofding vast blijft wanneer je naar de top scrolt. 
.header {
  positie: sticky;
  top: 0;
  inleg: 10px 16px;
  achtergrond: #555;
  kleur: #f1f1f1;
}

Probeer het zelf uit

elementen worden ingesteld op positie: sticky; naar de gebruikers scrollpositie te bepalen.

Vaste elementen schakelen tussen relatieve en vaste positie op basis van de scrollpositie. Ze blijven relatief zolang ze de gegeven afstand in het zicht niet hebben bereikt; als ze dat wel hebben bereikt, 'plakken' ze zich aan die positie (zoals positie: fixed zullen.

Opmerking:Om een vastgehecht positie-effect te activeren, moet je ten minste top,right,bottom of left 中的一个。

Related pages

Tutorial:CSS position