Yapışkan Üst / Alt Bilgi

Coddy'nin HTML Journey'sinin Pratik Ön Yüz bölümünün bir parçası. Ders 30 / 35.

Bir sticky header (veya footer), scroll yaptığınızda sayfanın top kısmında (veya bottom kısmında) görünür kalır. Bu, kullanıcının geri scroll etmesine gerek kalmadan gezinmenin veya önemli bilgilerin her zaman erişilebilir olmasını sağlar.

Yaygın olarak şunlar için kullanılır:

Website gezinme çubukları (sticky üst bilgi)
“Şimdi Satın Al” veya “Contact” çubukları (sticky footer)
key eylemlerin ekranda stay etmesi gereken mobil uygulamalar

Bir sticky header veya footer create edebilirsin; bunun için position: sticky veya position: fixed kullanabilirsin.

Örnek (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; /* just to create scroll */
}

Görev

Kolay

header, footer ve main content içeren bir HTML sayfası veriliyor. Görevin, header ve footer'ı sticky hâle getirerek her zaman görünür stay sağlamaktır. Görevin:

header'ı sayfanın top kısmına sabitle.
footer'ı sayfanın bottom kısmına sabitle.
header ve footer'a beyaz olmayan bir background color ve ortalanmış bir text ver.

Kullanıcı, ne kadar scroll yaparsa yapsın header ve footer'ı her zaman see etmelidir.

Kendin dene

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