Diese effektive und leistungsstarke Technik ist viel einfacher umzusetzen, als Sie vielleicht erwarten.

Im Webdesign ist ein Sticky-Header ein leistungsstarkes Tool, das die Benutzererfahrung und Navigation verbessert. Wenn Benutzer auf einer Webseite nach unten scrollen, bleibt ein Sticky-Header sichtbar, der sicherstellt, dass wichtige Navigationslinks immer zugänglich sind. Lassen Sie uns in die Feinheiten der Erstellung eines Sticky-Headers mithilfe von CSS eintauchen.

Wozu dient ein Sticky-Header?

Ein Sticky-Header bleibt an einer Stelle auf einer Webseite, auch wenn der Benutzer scrollt. In erster Linie spezifische CSS-Eigenschaften Position: klebrig, wird Ihnen dabei helfen, dieses Verhalten zu erreichen. Zu den Vorteilen eines Sticky-Headers gehören ein verbessertes Benutzererlebnis und eine einfache Website-Navigation.

  • Benutzer können problemlos auf die Hauptnavigationslinks zugreifen, ohne nach oben scrollen zu müssen.
  • Das Logo oder der Markenname bleibt sichtbar und stärkt so die Markenidentität.
    • instagram viewer
  • Ein Sticky-Header kann Platz sparen, indem er die Seitenleistennavigation entfernt und so mehr Platz für Inhalte lässt.

Entwerfen des Headers: HTML-Struktur

Die Grundlage eines jeden Sticky-Headers ist seine HTML-Struktur. So erstellen Sie die erforderlichen HTML-Elemente für Ihren Sticky-Header.

<body>
<header>
<spanclass="logo">Company Logo 🏠span>
<nav>
<ul>
<li><ahref="#home">Homea>li>
<li><ahref="#about">Abouta>li>
<li><ahref="#services">Servicesa>li>
<li><ahref="#contact">Contacta>li>
ul>
nav>
header>
<mainid="home"><h1>Home pageh1>main>
<sectionid="about"><h1>Abouth1>section>
<sectionid="services"><h1>Servicesh1>section>
<sectionid="contact"><h1>Contacth1>section>
body>

Diese Struktur verwendet einen Header, der das Logo enthält, und ein Navigationselement mit einer ungeordneten Liste von Navigationslinks. Anschließend werden ein Haupt-Tag und mehrere Abschnitts-Tags verwendet, um jeden Abschnitt auf der Seite darzustellen. Im Moment sieht die Seite so aus:

Mit CSS den Grundstein legen

Der folgende CSS-Code verwendet Eigenschaften des Boxmodells B. Polsterung, Rand und Flexbox, um ein attraktives Design mit einer Höhe für jeden Platzhalterabschnitt zu erstellen.

@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html { font-size: 62.5%; }


body { font-family: "Quicksand", sans-serif; }


main,
section { height: 100vh; }


.logo { font-size: 3rem; }


main,
header,
section {
display: flex;
align-items: center;
}


main { justify-content: center; }


header {
justify-content: space-between;
padding: 1rem 2rem;
background: #b2babb; 
}


navul {
display: flex;
column-gap: 2rem;
list-style: none;
}


a {
text-decoration: none;
font-size: 2rem;
color: #333;
}


section { justify-content: center; }


#home { background: #2c3e50; }


#about { background: #ccccff; }


#services { background: #f5b7b1; }


#contact { background: #40e0d0; }


h1 {
 font-size: 4rem;
 color: #fff;
}

Die Seite sollte nun so aussehen:

Implementierung des Sticky-Effekts: CSS

Wenn Sie derzeit auf der Seite nach unten scrollen, werden Sie feststellen, dass die Kopfzeile vom Bildschirm verschwindet. Um dies zu beheben, verwenden Sie die CSS-Positionseigenschaft und stellen Sie den Header auf Sticky ein.

Diese Eigenschaft verhält sich abhängig von der Scrollposition des Benutzers wie eine Kombination aus relativer und fester Positionierung.

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
}

Durch die Einstellung der Kopfzeile auf „Sticky“ wird sichergestellt, dass sie unabhängig vom Scrollen an einer Position auf der Seite bleibt. Die top-Eigenschaft gibt an, wo auf der Seite die Kopfzeile platziert werden soll. Wenn Sie nun auf der Seite nach unten scrollen, erhalten Sie Folgendes:

Behebung potenzieller Stapelprobleme

Manchmal überlappen andere Elemente auf der Seite den Sticky-Header. Um sicherzustellen, dass der Header oben bleibt, können Sie die Z-Index-Eigenschaft hinzufügen:

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 9999;
}

Fügen Sie abschließend die Smooth-Scrolling-Eigenschaft zum HTML-Element hinzu, um eine angenehmere Benutzererfahrung zu erzielen:

html {
font-size: 62.5%;
scroll-behavior: smooth;
}

Die Seite sollte nun reibungslos zwischen den Abschnitten scrollen:

Verbessern Sie die Webnavigation mit CSS-Sticky-Headern

Das Hinzufügen eines Sticky-Headers zu Ihrem Website-Design kann das Benutzererlebnis erheblich verbessern. Diese Funktion hält Benutzer mit dem Hauptmenü verbunden, sorgt für eine einheitliche Marke und verleiht Ihrer Website ein modernes Aussehen.

Mit der Leistungsfähigkeit von CSS ist die Erstellung dieses Effekts einfach und effektiv. Webdesign-Trends ändern sich im Laufe der Zeit, aber der Sticky-Header ist für verschiedene Branchen immer nützlich.