Sticky und Mobile Navigation

Mit Hash-Navigation springst du per Link direkt zu einer Section auf derselben Seite. Mit position: sticky bleibt die Navigation beim Scrollen sichtbar. Damit Überschriften beim Anspringen nicht unter der Navigation verschwinden, setzt du scroll-margin-top an den Ziel-Sections. Auf kleinen Bildschirmen ergänzt du einen Toggle-Button und verwandelst die Navigation in einen Drawer, der von unten ins Bild fährt.

Sticky-Navigation mit Hash-Links

Section-IDs anlegen: Gib jedem Zielbereich eine eindeutige ID.

<section id="intro">
  <h2>Intro</h2>
</section>

<section id="pflanzen">
  <h2>Pflanzen</h2>
</section>

<section id="kontakt">
  <h2>Kontakt</h2>
</section>

HTML

Hash-Links in der Navigation setzen: Verlinke auf die IDs mit #id.

<nav class="seiten-navigation" aria-label="Seitennavigation">
  <ul>
    <li><a href="#intro">Intro</a></li>
    <li><a href="#pflanzen">Pflanzen</a></li>
    <li><a href="#kontakt">Kontakt</a></li>
  </ul>
</nav>

HTML

Navigation sticky machen: So bleibt sie oben im sichtbaren Bereich, wenn du scrollst.

.seiten-navigation
  position: sticky
  top: 0
  z-index: 20
  background: white
  border-bottom: 1px solid var(--rahmen-farbe)
  padding: 0.75rem 1rem

  ul
    list-style: none
    display: flex
    gap: 1rem
    margin: 0
    padding: 0

SASS

scroll-margin-top ergänzen: Wenn du zu einer Section springst, entsteht oberhalb Abstand zur sticky Navigation.
```
section[id]
  scroll-margin-top: 6rem
```
SASS
Optional: weiches Scrollen aktivieren: Das verbessert die Orientierung beim Wechsel zwischen Sections.
```
html
  scroll-behavior: smooth
```
SASS

Komplettbeispiel: Hier sind Navigation und Sections in einem Stück.

<nav class="seiten-navigation" aria-label="Seitennavigation">
  <ul>
    <li><a href="#intro">Intro</a></li>
    <li><a href="#pflanzen">Pflanzen</a></li>
    <li><a href="#kontakt">Kontakt</a></li>
  </ul>
</nav>

<section id="intro">
  <h2>Intro</h2>
  <p>Inhalt Intro</p>
</section>

<section id="pflanzen">
  <h2>Pflanzen</h2>
  <p>Inhalt Pflanzen</p>
</section>

<section id="kontakt">
  <h2>Kontakt</h2>
  <p>Inhalt Kontakt</p>
</section>

HTML

html
  scroll-behavior: smooth

.seiten-navigation
  position: sticky
  top: 0
  z-index: 20
  background: white
  border-bottom: 1px solid var(--rahmen-farbe)
  padding: 0.75rem 1rem

  ul
    list-style: none
    display: flex
    gap: 1rem
    margin: 0
    padding: 0

section[id]
  scroll-margin-top: 6rem

SASS

Navigation testen und visuell anpassen: Prüfe die Navigation auf Desktop. Teste, ob alle Hash-Links zur richtigen Section springen, ob die sticky Navigation sichtbar bleibt und ob scroll-margin-top groß genug ist.

Passe die Navigation an deinen eigenen „Garten" an – sie soll sich harmonisch in das Gesamtdesign deiner Website einfügen.

Mobile Navigation ergänzen

Auf kleinen Bildschirmen hat eine horizontale Linkliste oft keinen Platz. Mit einem Toggle-Button und wenig JavaScript verwandelst du die Navigation in einen Drawer – ein Panel, das von unten ins Bild fährt. Ein halbtransparentes Overlay dahinter dunkelt den Inhalt ab und ermöglicht das Schließen per Klick daneben.

Toggle-Button ins HTML einfügen: Füge direkt nach der Navigation einen Button ein.

aria-controls="seiten-navigation" verknüpft den Button mit dem Element, das er steuert – der Wert muss der id der Navigation entsprechen. Screenreader können so ankündigen, welches Element der Button öffnet oder schließt, und erlauben es Nutzenden, direkt dorthin zu springen.

aria-expanded="false" teilt Screenreadern mit, ob das gesteuerte Element gerade auf- oder zugeklappt ist. false bedeutet: die Navigation ist geschlossen. Das Attribut muss per JavaScript synchron gehalten werden – beim Öffnen auf "true", beim Schließen zurück auf "false". Das passiert im JavaScript-Schritt weiter unten.
```
<nav class="seiten-navigation" id="seiten-navigation" aria-label="Seitennavigation">
  <ul>
    <li><a href="#intro">Intro</a></li>
    <li><a href="#pflanzen">Pflanzen</a></li>
    <li><a href="#kontakt">Kontakt</a></li>
  </ul>
</nav>

<div id="navigation-overlay"></div>

<button type="button" id="navigation-toggle"
        aria-controls="seiten-navigation"
        aria-expanded="false">
  Navigation
</button>
```
HTML

Button auf Desktop verstecken, auf Mobile anzeigen: Per default bleibt der Button unsichtbar. Unterhalb von 800 px wird er als fixierter Pill-Button rechts unten dargestellt.

#navigation-toggle
  display: none

  @media (max-width: 800px)
    display: flex
    position: fixed
    right: 1rem
    bottom: 1rem
    z-index: 3
    padding: .65rem 1rem
    border: 1px solid currentColor
    border-radius: .35rem
    background: white
    font-size: 14px
    cursor: pointer

SASS

Navigation als Drawer gestalten: Auf Mobile wird die Navigation aus dem normalen Fluss genommen und unterhalb des Viewports geparkt. Ein Attribut am <html>-Element steuert, ob sie sichtbar ist. visibility: hidden stellt sicher, dass der versteckte Drawer nicht per Tab erreichbar ist.

@media (max-width: 800px)
  .seiten-navigation
    position: fixed
    top: 100dvh
    left: 0
    right: 0
    z-index: 2
    visibility: hidden
    transition: translate 300ms, visibility 300ms
    background: white
    padding: 1.5rem

    ul
      flex-direction: column

  [nav-sichtbar] .seiten-navigation
    translate: 0 -100%
    visibility: visible

SASS

Overlay ins HTML einfügen und stylen: Das halbtransparente Overlay liegt hinter der Navigation und vor dem Seiteninhalt. Es ermöglicht das Schließen der Navigation per Klick daneben. Das leere <div> hast du bereits in Schritt 1 ins HTML eingefügt – hier kommt das passende CSS dazu.
```
#navigation-overlay
  position: fixed
  inset: 0
  z-index: 1
  background: rgba(0, 0, 0, .3)
  opacity: 0
  visibility: hidden
  pointer-events: none
  transition: opacity 300ms, visibility 300ms

[nav-sichtbar] #navigation-overlay
  opacity: 1
  visibility: visible
  pointer-events: auto
```
SASS

JavaScript: Öffnen und Schließen: Das Attribut nav-sichtbar am html-Element schaltet Navigation und Overlay gleichzeitig. aria-expanded bleibt dabei immer synchron mit dem tatsächlichen Zustand.

const button = document.getElementById('navigation-toggle');
const overlay = document.getElementById('navigation-overlay');
const navigationLinks = document.querySelectorAll('.seiten-navigation a');

const schliessen = () => {
  document.documentElement.removeAttribute('nav-sichtbar');
  button.setAttribute('aria-expanded', 'false');
};

button.addEventListener('click', () => {
  document.documentElement.toggleAttribute('nav-sichtbar');
  const istOffen = document.documentElement.hasAttribute('nav-sichtbar');
  button.setAttribute('aria-expanded', istOffen ? 'true' : 'false');
});

overlay.addEventListener('click', schliessen);
navigationLinks.forEach(link => link.addEventListener('click', schliessen));

Alles testen: Öffne die Browser-DevTools und schalte in den Responsive-Modus. Prüfe, ob der Toggle-Button unter 800 px erscheint, der Drawer von unten einfährt und das Overlay dahinter liegt. Teste auch, ob ein Klick auf das Overlay oder auf einen Navigationspunkt die Navigation schließt. Passe Farben und Abstände an dein eigenes Design an.