Implementieren Sie Sticky Navbar in React

Jedes Jahr wechseln mehr Benutzer vom Desktop-Browsing zu kleineren Bildschirmen. Die Menschen haben auch steigende Erwartungen an die Benutzererfahrung beim Surfen im Internet.

Webentwickler müssen sich an die sich ändernden Gewohnheiten der Benutzer anpassen. Websites werden reaktionsschneller und an mobile Benutzer angepasst.

Eine klebrige Navigationsleiste ist ein häufiges Merkmal moderner Webanwendungen. Es ermöglicht Benutzern, einfach zwischen den Seiten zu navigieren, ohne nach oben zu scrollen, um auf das Menü zuzugreifen.

Implementieren Sie Sticky Navbar in React

React ist ein JavaScript-basiertes Framework. Es verwendet die Templating-Sprache JSX, die ähnlich wie HTML aussieht, sich aber in gewisser Weise unterscheidet.

So können Sie beispielsweise JavaScript innerhalb des JSX-Codes verwenden. Es kann ähnlich wie HTML gestaltet werden, außer dass wir in JSX das Attribut className verwenden.

Um eine klebrige Navigationsleiste in React zu implementieren, müssen wir zuerst eine normale Navigationsleiste haben. Auf den ersten Blick mag JSX-Code nicht von HTML zu unterscheiden sein.

Beispiel:

export default function App() {
    return (
        <div className="App">
            <nav>
                <ul>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">FAQ</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </nav>
        </div>
    );
}

Dies ist eine einfache Navigationsleiste mit vier Menüpunkten. Sie können überprüfen, wie es aussieht, indem Sie diese Live-Demo besuchen.

In diesem Beispiel haben wir ein HTML-Element <nav>, das uns bei der Navigation in React geholfen hat. Wir haben auch eine ungeordnete Liste und Listenelemente, die jeden Menüpunkt darstellen.

Technisch gesehen könnte es sich um einen normalen <div>-Container mit <span>-Menüelementen handeln, aber dies ist der weit verbreitete Ansatz zum Erstellen von Navigationsmenüs.

Der Rest muss in CSS erledigt werden. Sie verwenden die Eigenschaft position in CSS und die Eigenschaft top, um Ihre Navigationsleiste nach oben auszurichten.

Um genau zu sein, sollten Sie Ihrem Stylesheet die folgenden Regeln hinzufügen:

nav {
    position: sticky;
    top: 0;
}

Mit der CSS-Eigenschaft position können wir angeben, wie ein bestimmtes Element auf dem Bildschirm positioniert wird. Weitere Informationen finden Sie in den offiziellen MDN-Dokumenten.

Damit das <ul>-Element wie eine Navigationsleiste aussieht, sollten Sie auch die Punkte von Listenelementen entfernen und sie horizontal stapeln. Sie können auch andere Elemente der Navigationsleiste gestalten, z. B. Hintergrund, Breite und Höhe.