So erstellen Sie einen Sticky-Header mit CSS
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.
Was ist ein Sticky Header?
Ein Sticky-Header bleibt an einer Stelle auf einer Webseite, auch wenn der Benutzer scrollt. Bestimmte CSS-Eigenschaften, vor allem position: sticky, helfen Ihnen dabei, dieses Verhalten zu erreichen. Folglich:
- 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.
- Ein Sticky-Header kann Platz sparen, indem er die Seitenleistennavigation entfernt und so mehr Platz für Inhalte lässt.
Zu den Vorteilen eines Sticky-Headers gehören ein verbessertes Benutzererlebnis und eine einfache Website-Navigation.
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>
<span class="logo">Company Logo 🏠</span>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="home"><h1>Home page</h1></main>
<section id="about"><h1>About</h1></section>
<section id="services"><h1>Services</h1></section>
<section id="contact"><h1>Contact</h1></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 wie 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;
}
nav ul {
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 setzen Sie den Header auf „Sticky“.
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 Eigenschaft „Smooth Scrolling“ zum HTML-Element hinzu, um ein angenehmeres Benutzererlebnis 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 unkompliziert und effektiv. Webdesign-Trends ändern sich im Laufe der Zeit, aber der Sticky-Header ist für verschiedene Branchen immer nützlich.