Sticky Header / Footer

Teil des Abschnitts Practical Frontend der HTML-Journey von Coddy — Lektion 30 von 35.

Ein fixierter Header (oder Footer) bleibt am oberen (oder unteren) Rand der Seite sichtbar, wenn Sie scrollen. Dies macht die Navigation oder wichtige Informationen immer zugänglich, ohne dass der Benutzer zurückscrollen muss.

Es wird häufig verwendet für:

Website-Navigationsleisten (Sticky Header)
„Jetzt kaufen“- oder „Kontakt“-Leisten (Sticky Footer)
Mobile Apps, bei denen wichtige Aktionen auf dem Bildschirm bleiben müssen

Sie können eine fixierte Kopf- oder Fußzeile mit position: sticky oder position: fixed erstellen.

Beispiel (Sticky Header)

HTML

<header>
  <h1>My Website</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>

<main>
  <p>Lots of content here...</p>
  <p>Keep scrolling down to see the header stay in place.</p>
</main>

CSS

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

header {
  position: sticky;
  top: 0;
}

main {
  padding: 2rem;
  height: 2000px; /* nur um Scrollen zu ermöglichen */
}

Aufgabe

Einfach

Sie erhalten eine HTML-Seite mit einem Header, einem Footer und einem Hauptinhalt. Ihre Aufgabe ist es, den Header und den Footer sticky zu machen, damit sie immer sichtbar bleiben. Ihre Aufgabe:

Lassen Sie den header am top der Seite haften.
Lassen Sie den footer am bottom der Seite haften.
Geben Sie dem Header und dem Footer eine Hintergrundfarbe (nicht weiß) und zentrierten Text.

Der Benutzer sollte den Header und den Footer immer sehen, egal wie weit er scrollt.

Spickzettel

Ein fixierter Header (oder Footer) bleibt beim Scrollen am oberen (oder unteren) Rand der Seite sichtbar, wodurch die Navigation oder wichtige Informationen immer zugänglich bleiben.

Erstellen Sie fixierte Elemente mit position: sticky oder position: fixed:

HTML

<header>
  <h1>My Website</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>

<main>
  <p>Content here...</p>
</main>

CSS

header {
  position: sticky;
  top: 0;
}

footer {
  position: sticky;
  bottom: 0;
}

Probier es selbst

<!DOCTYPE html>
<html>
<head>
  <title>Sticky Header / Footer</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      line-height: 1.6;
      background-color: #f4f4f4;
    }

    header {
      z-index: 100;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    footer {
      margin-top: auto;
      z-index: 100;
      box-shadow: 0 -2px 6px rgba(0,0,0,0.2);
    }

    main {
      flex: 1;
      padding: 2rem;
      max-width: 800px;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    h1, h2 {
      color: #333;
    }

    h2 {
      margin-top: 1.5rem;
    }

    p {
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>

  <header>
    <h1>Secrets of Longevity</h1>
  </header>

  <main>
    <h2>What Are Blue Zones?</h2>
    <p>Blue Zones are regions of the world where people live much longer than average. Researchers identified several key areas, including Okinawa (Japan), Sardinia (Italy), Nicoya (Costa Rica), Ikaria (Greece), and Loma Linda (California, USA).</p>

    <h2>Common Habits of Long-Lived People</h2>
    <p>People in Blue Zones often share similar lifestyle habits that contribute to longevity:</p>
    <ul>
      <li>Plant-based diets rich in vegetables, beans, and whole grains.</li>
      <li>Regular physical activity integrated into daily life, like walking or gardening.</li>
      <li>Strong social connections and family support.</li>
      <li>Stress reduction through meditation, prayer, or relaxation rituals.</li>
      <li>Having a sense of purpose, which motivates daily life.</li>
    </ul>

    <h2>Why Longevity Matters</h2>
    <p>Studying Blue Zones helps us understand how lifestyle, diet, and community can increase lifespan and improve quality of life. Adopting even a few of these habits can lead to a healthier, happier life.</p>

    <p>Remember, longevity isn’t just about living longer — it’s about living well.</p>
  </main>

  <footer>
    <p>&copy; 2025 Longevity Insights</p>
  </footer>

</body>
</html>