Przyklejony nagłówek / stopka

Część sekcji Praktyczny frontend ścieżki HTML w Coddy. Lekcja 30 z 35.

Przyklejony nagłówek (lub stopka) pozostaje widoczny u góry (lub na dole) strony podczas przewijania. Dzięki temu nawigacja lub ważne informacje są zawsze dostępne, bez konieczności przewijania z powrotem.

Jest powszechnie używane do:

Paski nawigacyjne witryny (przyklejony nagłówek)
Paski „Kup teraz” lub „Kontakt” (przyklejona stopka)
Aplikacje mobilne, w których najważniejsze działania muszą pozostać widoczne na ekranie

Możesz utworzyć przyklejony nagłówek lub stopkę za pomocą position: sticky lub position: fixed.

Przykład (przyklejony nagłówek)

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; /* tylko po to, aby umożliwić przewijanie */
}

Wyzwanie

Łatwy

Masz stronę HTML z nagłówkiem, stopką i główną zawartością. Twoim zadaniem jest sprawić, aby nagłówek i stopka były przyklejone, tak aby zawsze pozostawały widoczne. Twoje zadania:

Przyklej nagłówek do góry strony.
Przyklej stopkę do dołu strony.
Ustaw kolor tła nagłówka i stopki (inny niż biały) oraz wyśrodkuj tekst.

Użytkownik powinien zawsze widzieć nagłówek i stopkę, niezależnie od tego, jak daleko przewinie stronę.

Spróbuj swoich sił

<!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>