Wie man einen schrumpfenden Header beim Scrollen ohne JavaScript erstellt

Stellen Sie sich den Header einer Website vor, der schön und dick ist, mit viel Polsterung oben und unten für den Inhalt. Wenn Sie nach unten scrollen, schrumpft er zusammen, reduziert einen Teil dieser Polsterung und schafft mehr Platz auf dem Bildschirm für andere Inhalte.

Normalerweise müssten Sie etwas JavaScript verwenden, um einen solchen Schrumpfungseffekt zu erzielen. Seit der Einführung von position: sticky gibt es jedoch eine Möglichkeit, dies nur mit CSS zu erreichen.

Ich sage gleich vorweg: Ich bin im Allgemeinen kein Fan von Sticky Headern. Ich finde, dass sie zu viel Platz auf dem Bildschirm einnehmen. Ob Sie Sticky Header auf Ihrer eigenen Website verwenden sollten, ist jedoch eine andere Frage. Es hängt wirklich von Ihren Inhalten ab und davon, ob eine allgegenwärtige Navigation einen Mehrwert bietet. Wenn Sie sie verwenden, achten Sie besonders darauf, nicht versehentlich Inhalte oder Funktionalitäten mit den Sticky-Bereichen zu überdecken oder zu verdecken – das kommt einem Datenverlust gleich.

So oder so, hier ist, wie Sie es ohne JavaScript machen, beginnend mit dem Markup. Nichts Kompliziertes hier – ein <header> mit einem Nachfahren-<div>, der wiederum das Logo und die Navigation enthält.

<header class="header-outer">
  <div class="header-inner">
    <div class="header-logo">...</div>
    <nav class="header-navigation">...</nav>
  </div>
</header>

Was das Styling angeht, werden wir eine Höhe für den übergeordneten <header> (120px) festlegen und ihn als flexiblen Container einrichten, der seine Nachfahren zentriert. Dann machen wir ihn sticky.

.header-outer {
  display: flex;
  align-items: center;
  position: sticky;
  height: 120px;
}

Der innere Container enthält alle Header-Elemente wie das Logo und die Navigation. Der innere Container ist sozusagen der eigentliche Header, während die einzige Funktion des übergeordneten <header>-Elements darin besteht, den Header höher zu machen, damit er etwas zum Schrumpfen hat.

Wir geben diesem inneren Container, .header-inner, eine Höhe von 70px und machen ihn ebenfalls sticky.

.header-inner {
  height: 70px;
  position: sticky;
  top: 0; 
}

Dieses top: 0? Es sorgt dafür, dass sich der Container ganz oben am Rand festsetzt, wenn er sticky wird.

Und jetzt zum Trick! Damit der innere Container tatsächlich am „Himmel“ der Seite klebt, müssen wir dem übergeordneten <header> einen negativen top-Wert geben, der der Höhendifferenz zwischen den beiden Containern entspricht, wodurch er „über“ dem Viewport klebt. Das sind 70px minus 120px, was übrig bleibt – Trommelwirbel, bitte – -50px. Fügen wir das hinzu.

.header-outer {
  display: flex;
  align-items: center;
  position: sticky;
  top: -50px; /* Equal to the height difference between header-outer and header-inner */
  height: 120px;
}

Fassen wir alles zusammen. Der <header> gleitet aus dem Bild, während der innere Container sich ordentlich oben im Viewport platziert.

Wir können das auf andere Elemente ausweiten! Wie wäre es mit einer persistenten Benachrichtigung?

Auch wenn es ziemlich großartig ist, dass wir das mit CSS machen können, hat es seine Grenzen. Zum Beispiel verwenden der innere und der äußere Container feste Höhen. Das macht sie anfällig für Änderungen, zum Beispiel wenn sich die Navigationselemente umbrechen, weil die Anzahl der Menüpunkte den verfügbaren Platz übersteigt.

Eine weitere Einschränkung? Das Logo kann nicht schrumpfen. Das ist vielleicht der größte Nachteil, da Logos oft am meisten Platz beanspruchen. Vielleicht können wir eines Tages Stile basierend auf der Stickiness eines Elements anwenden...