Sticky-Navigation mit Hash-Links

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.

Sticky-Navigation und Hash-Links umsetzen

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;
}

.seiten-navigation ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

CSS

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

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;
}

.seiten-navigation ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

section[id] {
  scroll-margin-top: 6rem;
}

CSS

Navigation testen und visuell anpassen: Prüfe die Navigation auf Desktop und Mobile. 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. Nutze dazu die CSS-Eigenschaften aus den vorherigen Schritten und gestalte sie nach deinen Vorstellungen.