Wie man erstellt: festsitzende Kopfzeile beim Scrollen

Lernen Sie, wie Sie eine festsitzende/haftige Kopfzeile mit CSS und JavaScript erstellen.

Versuchen Sie es selbst aus

Erstellen Sie eine festsitzende Kopfzeile beim Scrollen

Schritt 1 - Fügen Sie HTML hinzu:

<div class="header" id="myHeader">
  <h2>Meine Kopfzeile</h2>
</div>

Schritt 2 - Fügen Sie CSS hinzu:

Stellen Sie den Stil des Kopfzeilen; fügen Sie position: haftig und top: 0 hinzu, um sicherzustellen, dass die Kopfzeile beim Scrolling nach oben fix bleibt. 
.header {
  position: haftig;
  top: 0;
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

Versuchen Sie es selbst aus

Das Element wird auf position: haftig; dann wird seine Position basierend auf der Positionsverschiebung des Benutzers bestimmt.

Haftige Elemente wechseln zwischen relativer und fester Position basierend auf der Positionsverschiebung des Scrolleffekts. Vor Erreichen der angegebenen Verschiebungsposition bleibt es bei der relativen Position; nach Erreichen dieser Position "klebt" es an dieser Position (wie position: fest ）。

Hinweis:Um die Haftige Position zu aktivieren, müssen Sie mindestens top、right、bottom oder left 中的一个。

Related pages

Tutorial:CSS position