Website-Suche

So erstellen Sie einen Sticky-Header in React


Fügen Sie mit einer dieser einfachen Techniken einen dauerhaften Header zu Ihrem Seitendesign hinzu.

Einige Website-Designs verwenden eine Kopfzeile, die beim Scrollen nach unten am oberen Bildschirmrand „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 Bildschirmrand fixiert bleibt, während der Benutzer auf der Seite nach unten scrollt. Dies kann nützlich sein, um wichtige Informationen sichtbar zu halten, während der Benutzer scrollt.

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

Einen Sticky-Header erstellen

Als Erstes müssen Sie einen Onscroll-Handler einrichten. Diese Funktion wird jedes Mal ausgeführt, wenn der Benutzer einen Bildlauf durchführt. Sie können dies tun, indem Sie dem Fensterobjekt einen Onscroll-Ereignis-Listener hinzufügen und React-Hooks verwenden. 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 mithilfe von CSS.

import React, { useState, useEffect } from 'react';\nfunction StickyHeader() {\n const [isSticky, setSticky] = useState(false);\n const handleScroll = () => {\n const windowScrollTop = window.scrollY;\n if (windowScrollTop > 10) {\n setSticky(true);\n } else {\n setSticky(false);\n }\n };\n useEffect(() => {\n window.addEventListener('scroll', handleScroll);\n return () => {\n window.removeEventListener('scroll', handleScroll);\n };\n }, []);\n const items = [\n {\n name: 'Home',\n link: '/'\n },\n {\n name: 'About',\n link: '/about'\n },\n {\n name: 'Contact',\n link: '/contact'\n }\n ];\n const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\n 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]\n return (\n <div className="App">\n <header style={{ background: isSticky ? '#fff' : '', width: '100%', zIndex: '999',position:isSticky ?'fixed':'absolute' }}>\n {items.map(item => (\n <a href={item.link} key={item.name}>\n {item.name}\n </a>\n ))}\n </header>\n <ul>\n {data.map((x) => {\n return (<li key={x}>{x}</li>)\n })}\n </ul>\n </div>\n );\n}\nexport default StickyHeader;

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

.sticky {\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 999;\n}\n

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 Schaltfläche „Zurück nach oben“ hinzufügen oder die Kopfzeile transparent machen, wenn der Benutzer nach unten scrollt.

Mit dem folgenden Code können Sie eine Back-to-Top-Schaltfläche hinzufügen.

import React, { useState, useEffect } from 'react';\nfunction StickyHeader() {\n const [isSticky, setSticky] = useState(false);\n const [showBackToTop, setShowBackToTop] = useState(false);\n const handleScroll = () => {\n const windowScrollTop = window.scrollY;\n if (windowScrollTop > 10) {\n setSticky(true);\n setShowBackToTop(true);\n } else {\n setSticky(false);\n setShowBackToTop(false);\n }\n };\n const scrollToTop = () => {\n window.scrollTo({\n top: 0,\n behavior: 'smooth'\n });\n };\n useEffect(() => {\n window.addEventListener('scroll', handleScroll);\n return () => {\n window.removeEventListener('scroll', handleScroll);\n };\n }, []);\n const items = [\n {\n name: 'Home',\n link: '/'\n },\n {\n name: 'About',\n link: '/about'\n },\n {\n name: 'Contact',\n link: '/contact'\n }\n ];\n const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\n 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]\n return (\n <div className="App">\n <header style={{ background: isSticky ? '#fff' : '', width: '100%', zIndex: '999',position:isSticky ?'fixed':'absolute' }}>\n {items.map(item => (\n <a href={item.link} key={item.name}>\n {item.name}\n </a>\n ))}\n </header>\n \n <ul>\n {data.map((x) => {\n return (<li key={x}>{x}</li>)\n })}\n </ul>\n <div>\n {showBackToTop && (\n <button onClick={scrollToTop}>Back to top</button>\n )}</div>\n </div>\n );\n}\nexport default StickyHeader;

Dieser Code erstellt eine Sticky-Header-Komponente und formatiert sie mithilfe von CSS. Sie können die Komponente auch mit Tailwind CSS formatieren.

Alternative Methoden

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

Verwendung von React-Sticky

Die React-Sticky-Bibliothek hilft Ihnen beim Erstellen von Sticky-Elementen in React. Um React-Sticky zu verwenden, installieren Sie es zunächst:

npm install react-sticky

Dann können Sie es wie folgt verwenden:

import React from 'react';\nimport { StickyContainer, Sticky } from 'react-sticky';\nfunction App() {\n const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\n 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]\n return (\n <div>\n <StickyContainer>\n <Sticky>{({ style }) => (\n <header style={style}>\n This is a sticky header\n </header>\n )}\n </Sticky>\n <ul>\n {data.map((x) => {\n return (<li key={x}>{x}</li>)\n })}\n </ul>\n </StickyContainer>\n \n </div>\n );\n}\nexport default App;

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

Anschließend 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 in der darauf folgenden Liste als Sticky festlegen, also fügen Sie den StickyContainer um die beiden hinzu.

Fügen Sie als Nächstes die Sticky-Komponente um das Element herum hinzu, das Sie klebrig 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 der Header korrekt positioniert.

Verwendung von React-Stickynode

React-stickynode ist eine weitere Bibliothek, die Ihnen beim Erstellen von Sticky-Elementen in React hilft.

Um React-Stickynode zu verwenden, installieren Sie es zunächst:

npm install react-stickynode

Dann können Sie es so verwenden:

import React from 'react';\nimport Sticky from 'react-stickynode';\nfunction App() {\n const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\n 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]\n return (\n <div>\n <Sticky enabled={true} bottomBoundary={1200}>\n <div>\n This is a sticky header\n </div>\n </Sticky>\n <ul>\n {data.map((x) => {\n return (<li key={x}>{x}</li>)\n })}\n </ul>\n </div>\n );\n}\nexport default App;

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

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

Fügen Sie abschließend die Requisiten „enabled“ und „bottomBoundary“ zur Sticky-Komponente hinzu. Die aktivierte Requisite stellt sicher, dass der Header „sticky“ ist, und die „bottomBoundary“-Requisite sorgt dafür, dass er nicht zu weit nach unten auf der Seite geht.

Verbessern Sie die Benutzererfahrung

Bei einem Sticky-Header kann es für den Benutzer leicht passieren, dass er den Überblick darüber verliert, wo er sich auf der Seite befindet. Sticky Header können besonders auf Mobilgeräten problematisch sein, da der Bildschirm kleiner ist.

Um das Benutzererlebnis zu verbessern, können Sie auch eine Schaltfläche „Zurück zum Anfang“ hinzufügen. Eine solche Schaltfläche ermöglicht es dem Benutzer, schnell zum Seitenanfang zurückzublättern. Dies kann besonders bei langen Seiten hilfreich sein.

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

Verwandte Artikel: