So erstellen Sie einen klebrigen Website-Header
Veröffentlicht: 2023-02-12Website-Header, die beim Scrollen eines Benutzers an Ort und Stelle bleiben, sind zu einem sehr beliebten Designelement geworden. Sie ermöglichen dem Benutzer einen einfachen Zugriff auf die Navigation, ohne jedes Mal nach oben scrollen zu müssen, wenn er eine andere Seite oder Option auswählen möchte.
Elemente mit dieser Funktionalität werden oft als „sticky“ bezeichnet, weil sie beim Benutzer bleiben und sichtbar bleiben, während sie sich durch die Website bewegen. Wenn ein Benutzer zum ersten Mal auf der Website ankommt, befinden sich die Elemente an ihrer Ausgangsposition, aber dann bleibt der Sticky-Header an derselben Stelle.
Da die Navigation eines der wichtigsten Elemente einer Website ist, trägt dieser Ansatz dazu bei, die Navigation zugänglicher zu machen. Eine Navigation, die an Ort und Stelle bleibt, ermöglicht dem Benutzer einen einfachen Fluss, während er sich durch den Inhalt der Website bewegt, was äußerst wichtig ist.
Sticky-Navigationselemente tragen dazu bei, einen einfachen Benutzerfluss zu schaffen, während sich Benutzer durch Ihre Website bewegen.
Was macht es klebrig?
Eine feste Positionierung ist eine Schlüsselkomponente, damit die Navigation an Ort und Stelle bleibt. Dieses Element mit fester Position wird relativ zum Ansichtsfenster oder zum Browserfenster selbst positioniert. Da sich der Darstellungsbereich beim Scrollen der Website nicht ändert, bleibt dieses fest positionierte Element beim Scrollen der Seite an derselben Stelle.
Hinweis: Versuchen Sie dies nicht auf Ihrer Live-Site
Denken Sie daran: Sie sollten den Code niemals direkt auf Ihrer Live-Site ändern, um sicherzustellen, dass nichts kaputt geht. Unsere kostenlose lokale Entwicklungs-App Local hilft Ihnen beim Einrichten einer Testumgebung, in der Sie diesem Tutorial sicher folgen können.
Wie bringen wir die Navigation dazu, an einem Ort zu bleiben?
Die Navigation klebrig zu machen könnte nicht einfacher sein; es ist nur mit CSS-Styling erledigt. Es sieht im Grunde ungefähr so aus:
[CSS]
.navbar-fixed-top {
Position: fest;
rechts: 0;
links: 0;
Z-Index: 999;
}
[/css] Egal wie lang Ihre Seite ist oder wie oft Sie nach oben und unten scrollen, die Navigation bleibt am oberen Rand der Seite hängen. Der Navigation wurde eine Klasse namens .navbar-fixed-top hinzugefügt, die die Platzierung für die Navigation erstellt. Ich habe diese Klasse zum Nav-Tag hinzugefügt. Die Position ist fest eingestellt und das Hinzufügen einer linken und rechten Positionierung stellt sicher, dass die Platzierung korrekt ist und die volle Breite der Seite einnimmt.
Denken Sie daran, dass jedes Mal, wenn diese Klasse angewendet wird, die feste Position des Elements erstellt wird. Höchstwahrscheinlich wird diese Klasse nur einmal angewendet, da sich sonst mehrere Seitenelemente an derselben Stelle auf die gleiche Weise verhalten und ein Durcheinander erzeugen würden.
Eine weitere wichtige Überlegung ist der Z-Index. Da wir möchten, dass die Navigation immer sichtbar ist, müssen wir sicherstellen, dass sie nicht von anderen Elementen überlagert wird. Wenn wir auf den z-index verweisen, sprechen wir über die CSS-Eigenschaft, die die Stapelreihenfolge bestimmter Elemente festlegt. Ein Element mit größerer Stapelreihenfolge liegt immer vor einem anderen Element mit niedrigerer Stapelreihenfolge. Ein Wert von 999 ist eine große Zahl und damit ein sicherer Wert für die Navigation.
Passen Sie den Seitenkörper an
Da sich die Navigation jetzt an einer festen Position befindet, wird sie einen Teil des Inhalts oben überdecken. Dafür gibt es eine einfache Lösung. Durch das Hinzufügen von Padding am oberen Rand des Textkörpers wird die Seite nach unten gedrückt, sodass der Inhalt oben nicht von der Kopfzeile verdeckt wird, wenn der Benutzer auf der Seite ankommt.
Sie können dem Körper in Ihrer CSS-Datei Polsterung hinzufügen:
[CSS]
Körper {
Polsterung oben: 75px;
}
[/css]Denken Sie daran, dass Ihre Polsterung größer oder kleiner sein kann, je nachdem, wie dick der feste Header ist.
Den klebrigen Header matschig machen
Es ist üblich, einen Header zu finden, der dünner wird, wenn ein Benutzer über einen bestimmten Punkt hinausscrollt, wodurch er matschig aussieht. Wenn die Navigation verkleinert wird, hilft dies, dem Benutzer mehr Platz zu geben, um den Hauptinhalt der Website zu sehen. Dies ist besonders bei kleineren Geräten hilfreich. Wir werden eine Kombination aus CSS und JavaScript verwenden, um dies zu erreichen.
Squishy-Navigation mit AnimatedHeader-Skript
Um einen animierten Header hinzuzufügen, der seine Größe beim Scrollen ändert, gibt es eine großartige, leichte Lösung, um die Navigation matschig zu machen. Es heißt AnimatedHeader. Es hat eine MIT-Lizenz, sodass es für persönliche oder kommerzielle Projekte verwendet werden kann. Um diese Dateien zu erhalten, sehen Sie sich AnimatedHeader auf GitHub an.
Grundlegendes CSS für die Navigation
Werfen wir einen Blick auf zwei wichtige CSS-Stile. Das erste kommt Ihnen wahrscheinlich bekannt vor, .navbar-fixed-top , das unsere Höhe, Breite und feste Position für die Sticky-Navigation angibt. Unten sehen Sie, dass eine weitere Klasse hinzugefügt wurde, die eine Höhe von 75 Pixel angibt. Dies ist die „gequetschte“ Größe.
[CSS]
.navbar-fixed-top {
Position: fest;
oben: 0;
links: 0;
Breite: 100 %;
Hintergrund: #f6f6f6;
Z-Index: 999;
Höhe: 90px;
Überlauf versteckt;
-webkit-Übergang: Höhe 0,3s;
-moz-Übergang: Höhe 0,3s;
Übergang: Höhe 0,3 s;
}
.navbar-fixed-top.cbp-af-header-shrink {
Höhe: 75px;
}
[/css] Um die Größe zu ändern, wird JavaScript verwendet, um die Klasse .cpb-af-header-shrink hinzuzufügen. Werfen wir einen Blick auf den Teil des Skripts, der dies bewirkt:
[Javascript]
Funktion scrollPage() {
var sy = scrollY();
if (sy >= changeHeaderOn) {
classie.add (header, 'cbp-af-header-shrink');
}
anders {
classie.remove (header, 'cbp-af-header-shrink');
}
didScroll = falsch;
}
[/javascript] Nur zur Erinnerung, das Skript hat noch mehr zu bieten, laden Sie also unbedingt den Quellcode herunter, damit Sie alle Komponenten haben. Wie Sie sehen können, wird die Klasse .cpb-af-header-shrink hinzugefügt, nachdem ein Benutzer über einen bestimmten Punkt gescrollt hat. Wenn der Benutzer auf der Seite zurückscrollt, wird diese Klasse entfernt.
Die CSS-Sticky-Positionierungsoption
Es gibt auch eine Option, die weniger Aufwand bedeutet. Abhängig von der Browserunterstützung, für die Sie entwerfen, position: sticky; macht das Erstellen eines Sticky-Headers sehr einfach. Die Browserunterstützung ist nicht schlecht, aber auch nicht vollständig global. Wenn Sie sticky deklariert haben, können Präfixe verwendet werden. Weitere Informationen finden Sie unter Can i Use.
Eine einfache Möglichkeit, die klebrige Positionierung zu beschreiben, besteht darin, dass es sich um eine Kombination aus relativer und fester Positionierung handelt. Ich vermute, Sie stoßen ziemlich oft auf klebrige Positionierungen. Wir sprechen hier von Kopfzeilen, aber es ist auch nützlich für jedes UI-Element, das beim Scrollen der Benutzer „klebrig“ bleiben soll. Sie sehen, dass es „hängen bleibt“, wenn das Element einen bestimmten Abstand vom Rand des Ansichtsfensters erreicht.
Das Element wird bis zu einem bestimmten Punkt als relativ positioniert behandelt und dann „fixiert“. Dieser Punkt wird mit CSS deklariert. Der „Punkt“ ist im Grunde genommen, wenn Sie oben, unten, links oder rechts angeben, wie Sie es bei einer absoluten Positionierung tun würden. Sie müssen angeben, dass das Element etwas hat, an dem es „haften“ kann.
Verwendungsposition: Klebrig
Es ist ziemlich einfach zu bedienen. Ein paar CSS-Deklarationen und ich konnte einen Sticky-Header haben. Hier sind drei einfache Schritte:
- Finden Sie den richtigen Stil, damit Sie das Element mit
position:sticky;(Browser-Präfixe wieposition: -webkit-sticky;) nicht vergessen. - Wählen Sie die „klebrige Kante“ (oben, rechts, unten oder links), an der das Objekt „kleben“ soll.
- Geben Sie den Abstand von der „klebrigen Kante“ an, dh 10 Pixel für eine Kopfzeile, die klebrig wird, wenn sie 10 Pixel vom Scrollbereich entfernt ist.
[CSS]
.navbar-fixed-top {
Position: -webkit-sticky;
Position: klebrig;
oben: 0;
}
[/css] 
Ich wollte keinen Abstand zwischen dem Sticky-Header und dem Ansichtsfenster, also sind es 0 Pixel von oben. Sie können dieses Beispiel auf Codepen sehen.
Seien Sie sich dieser klebrigen Überlaufsituationen bewusst
Überlaufkompatibilität
Es ist großartig, aber es ist nicht perfekt. Es gibt einige Einschränkungen. Überlauf kann manchmal etwas unvorhersehbar sein. Es ist am besten, bestimmte Arten von Überläufen bei einem übergeordneten Element mit etwas, das position: sticky . Es kann Probleme mit Overflow Auto, Scroll oder Hidden geben.
Eingeschränkte Browserunterstützung
Die Browserunterstützung ist begrenzt, daher ist es eine Option, die supports zu verwenden, um festzustellen, ob der aktuelle Browser Sticky-Positionierung unterstützt. Das sieht aus wie:
[CSS]
@supports(position:sticky){
.Header{
Position: -webkit-sticky;
Position: klebrig;
oben: 0;
}
}
[/css]Es ist wichtig, darüber nachzudenken, ob die klebrige Positionierung unbedingt erforderlich ist. Wenn dies der Fall ist, kann der Ansatz mit fester Positionierung verwendet werden. Wenn es nicht unbedingt erforderlich ist oder die Browserunterstützung kein Problem darstellt, ist der Sticky-Ansatz einfacher zu implementieren.
Es mag auf den ersten Blick komplex erscheinen, aber es gibt keinen Grund, in einem Navigationstrott festzustecken; Es ist relativ einfach, Ihre Navigation klebrig und matschig zu machen. Mit einer einfachen CSS-Positionierung können Sie ganz einfach einen klebrigen Website-Header erstellen. Mit etwas einfachem JavaScript kann die feste Navigation verbessert werden, indem sie auf eine reduzierte Höhe gestaucht wird, sodass Benutzer mehr Platz zum Anzeigen von Website-Inhalten haben.
Versuchen Sie dies nicht auf Ihrer Live-Website
Erstellen Sie einen Sticky-Website-Header für Ihre von WP Engine gehosteten Websites auf Local! Erfahren Sie mehr und laden Sie es hier kostenlos herunter!
