Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Einige Website-Designs verwenden eine Kopfzeile, die beim Herunterscrollen am oberen Rand des Bildschirms "klebt". Ein Header, der beim Scrollen sichtbar bleibt, wird oft als Sticky Header bezeichnet.

Sie können Ihrer React-Site einen Sticky-Header hinzufügen, indem Sie selbst benutzerdefinierten Code schreiben oder eine Bibliothek eines Drittanbieters verwenden.

Was ist ein Sticky-Header?

Ein Sticky Header ist ein Header, der am oberen Rand des Bildschirms fixiert bleibt, wenn der Benutzer die Seite nach unten scrollt. Dies kann nützlich sein, um wichtige Informationen sichtbar zu halten, während der Benutzer scrollt.

Denken Sie jedoch daran, dass ein Stick-Header die Menge an Bildschirmfläche für Ihr verbleibendes Design reduziert. Wenn Sie einen Sticky-Header verwenden, ist es eine gute Idee, ihn kurz zu halten.

Sticky-Header erstellen

instagram viewer

Als erstes müssen Sie einen Onscroll-Handler einrichten. Diese Funktion wird jedes Mal ausgeführt, wenn der Benutzer scrollt. Sie können dies tun, indem Sie dem window-Objekt einen onscroll-Ereignis-Listener hinzufügen und by mit React-Hooks. Um den onscroll-Handler einzurichten, müssen Sie den useEffect-Hook und die addEventListener-Methode des Fensterobjekts verwenden.

Der folgende Code erstellt eine Sticky-Header-Komponente und formatiert sie mit CSS.

importieren Reagieren, { useState, useEffect } aus 'reagieren';
FunktionStickyHeader() {
konst [isSticky, setSticky] = useState(FALSCH);
konst handleScroll = () => {
konst windowScrollTop = Fenster.scrollY;
 if (windowScrollTop > 10) {
 setSticky(WAHR);
 } anders {
 setSticky(FALSCH);
 }
 };
 useEffect(() => {
 window.addEventListener('scrollen', handleScroll);
zurückkehren () => {
 window.removeEventListener('scrollen', handleScroll);
 };
 }, []);
konst Artikel = [
 {
 Name: 'Heim',
 Verknüpfung: '/'
 },
 {
 Name: 'Um',
 Verknüpfung: '/about'
 },
 {
 Name: 'Kontakt',
 Verknüpfung: '/contact'
 }
 ];
konst Daten = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
zurückkehren (
<div Klassenname="App">
<header style={{ background: isSticky? '#F f f': '', Breite: '100%', zIndex: '999', position: isSticky ?'Fest':'absolut' }}>
 {Elemente.map (Element => (
<a href={item.link} key={item.name}>
 {Artikelname}
</A>
 ))}
</header>
<Ul>
 {Daten.map((x) => {
 zurückkehren (<li key={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
ExportStandard StickyHeader;

Diese Methode verwendet Inline-Styling, aber Sie können auch CSS-Klassen verwenden. Zum Beispiel:

.klebrig {
 Position: fest;
 oben: 0;
 Breite: 100 %;
 Z-Index: 999;
}

Die resultierende Seite sieht folgendermaßen aus:

Zusatzfunktionen

Es gibt noch ein paar andere Dinge, die Sie tun können, um Ihren Sticky Header benutzerfreundlicher zu gestalten. Sie können beispielsweise eine Zurück-nach-oben-Schaltfläche hinzufügen oder die Kopfzeile transparent machen, wenn der Benutzer nach unten scrollt.

Sie können den folgenden Code verwenden, um eine Zurück-nach-oben-Schaltfläche hinzuzufügen.

importieren Reagieren, { useState, useEffect } aus 'reagieren';
FunktionStickyHeader() {
konst [isSticky, setSticky] = useState(FALSCH);
konst [showBackToTop, setShowBackToTop] = useState(FALSCH);
konst handleScroll = () => {
konst windowScrollTop = Fenster.scrollY;
 if (windowScrollTop > 10) {
 setSticky(WAHR);
 setShowBackToTop(WAHR);
 } anders {
 setSticky(FALSCH);
 setShowBackToTop(FALSCH);
 }
 };
konst scrollToTop = () => {
Fenster.scrollTo({
 oben: 0,
 Verhalten: 'glatt'
 });
 };
 useEffect(() => {
 window.addEventListener('scrollen', handleScroll);
zurückkehren () => {
 window.removeEventListener('scrollen', handleScroll);
 };
 }, []);
konst Artikel = [
 {
 Name: 'Heim',
 Verknüpfung: '/'
 },
 {
 Name: 'Um',
 Verknüpfung: '/about'
 },
 {
 Name: 'Kontakt',
 Verknüpfung: '/contact'
 }
 ];
konst Daten = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
zurückkehren (
<div Klassenname="App">
<header style={{ background: isSticky? '#F f f': '', Breite: '100%', zIndex: '999', position: isSticky ?'Fest':'absolut' }}>
 {Elemente.map (Element => (
<a href={item.link} key={item.name}>
 {Artikelname}
</A>
 ))}
</header>
<Ul>
 {Daten.map((x) => {
 zurückkehren (<li key={x}>{X}</li>)
 })}
</ul>
<div>
 {ShowBackToTop && (
<Schaltfläche onClick={scrollToTop}>Zurück nach oben</button>
 )}</div>
</div>
 );
}
ExportStandard StickyHeader;

Dieser Code erstellt eine Sticky-Header-Komponente und formatiert sie mit CSS. Du kannst auch Gestalten Sie die Komponente mit Tailwind CSS.

Alternative Methoden

Sie können auch eine Bibliothek eines Drittanbieters verwenden, um einen Sticky-Header zu erstellen.

Mit React-Sticky

Die React-Sticky-Bibliothek hilft Ihnen, Sticky-Elemente in React zu erstellen. Um React-Sticky zu verwenden, installieren Sie es zuerst:

npm Installieren reagieren-klebrig

Dann können Sie es wie folgt verwenden:

importieren Reagieren aus 'reagieren';
importieren { StickyContainer, Sticky } aus 'reagieren-klebrig';
FunktionApp() {
konst Daten = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
zurückkehren (
<div>
<StickyContainer>
<Klebrig>{({Stil}) => (
<Header-Stil = {Stil}>
 Das Ist ein klebriger Header
</header>
 )}
</Sticky>
<Ul>
 {Daten.map((x) => {
 zurückkehren (<li key={x}>{X}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
ExportStandard Anwendung;

Im obigen Code müssen Sie zuerst die StickyContainer- und Sticky-Komponenten aus der React-Sticky-Bibliothek importieren.

Dann müssen Sie die StickyContainer-Komponente um den Inhalt herum hinzufügen, der das Sticky-Element enthalten soll. In diesem Fall möchten Sie den Header innerhalb der darauf folgenden Liste sticky machen, also fügen Sie den StickyContainer um die beiden hinzu.

Fügen Sie als Nächstes die Sticky-Komponente um das Element hinzu, das Sie sticky machen möchten. In diesem Fall ist das das Header-Element.

Fügen Sie schließlich der Sticky-Komponente eine Stilstütze hinzu. Dadurch wird die Kopfzeile richtig positioniert.

Verwenden von React-Stickynode

React-Stickynode ist eine weitere Bibliothek, mit der Sie Sticky-Elemente in React erstellen können.

Um React-Stickynode zu verwenden, installieren Sie es zuerst:

npm Installieren reagieren-stickynode

Dann kannst du es so verwenden:

importieren Reagieren aus 'reagieren';
importieren Klebrig aus 'react-stickynode';
FunktionApp() {
konst Daten = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
zurückkehren (
<div>
<Sticky aktiviert={true} bottomBoundary={1200}>
<div>
 Das Ist ein klebriger Header
</div>
</Sticky>
<Ul>
 {Daten.map((x) => {
 zurückkehren (<li key={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
ExportStandard Anwendung;

Beginnen Sie mit dem Importieren der Sticky-Komponente aus der React-Stickynode-Bibliothek.

Fügen Sie dann die Sticky-Komponente um das Element hinzu, das Sie sticky machen möchten. Machen Sie in diesem Fall den Header sticky, indem Sie die Sticky-Komponente um ihn herum hinzufügen.

Fügen Sie schließlich die Props enabled und bottomBoundary zur Sticky-Komponente hinzu. Das aktivierte Prop stellt sicher, dass der Header klebrig ist, und das bottomBoundary-Prop stellt sicher, dass es nicht zu weit nach unten auf der Seite geht.

Verbessern Sie die Benutzererfahrung

Mit einem klebrigen Header kann es für den Benutzer leicht sein, den Überblick darüber zu verlieren, wo er sich auf der Seite befindet. Sticky-Header können auf mobilen Geräten, auf denen der Bildschirm kleiner ist, besonders problematisch sein.

Um die Benutzererfahrung zu verbessern, können Sie auch eine Schaltfläche "Zurück nach oben" hinzufügen. Eine solche Schaltfläche ermöglicht es dem Benutzer, schnell zum Anfang der Seite zurück zu scrollen. Dies kann besonders bei langen Seiten hilfreich sein.

Wenn Sie bereit sind, können Sie Ihre React-App kostenlos auf GitHub Pages bereitstellen.