Yapışkan Üst / Alt Bilgi

Coddy'nin HTML Journey'sinin Practical Frontend bölümünün bir parçası — ders 30 / 35.

Bir yapışkan başlık (veya alt bilgi), kaydırdığınızda sayfanın üstünde (veya altında) görünür kalır. Bu, kullanıcının geri kaydırmasına gerek kalmadan navigasyonun veya önemli bilgilerin her zaman erişilebilir olmasını sağlar.

Genellikle şunlar için kullanılır:

Web sitesi navigasyon çubukları (yapışkan üst bilgi)
“Şimdi Satın Al” veya “İletişim” çubukları (yapışkan alt bilgi)
Önemli eylemlerin ekranda kalması gereken mobil uygulamalar

position: sticky veya position: fixed kullanarak yapışkan bir üst bilgi veya alt bilgi oluşturabilirsiniz.

Örnek (Sabit Başlık)

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; /* sadece kaydırma oluşturmak için */
}

Görev

Kolay

Size bir üst bilgi (header), alt bilgi (footer) ve ana içerikten oluşan bir HTML sayfası verilmiştir. Göreviniz, üst bilgi ve alt bilgiyi her zaman görünür kalacak şekilde yapışkan (sticky) hale getirmektir. Göreviniz:

header öğesini sayfanın üstüne (top) sabitleyin.
footer öğesini sayfanın altına (bottom) sabitleyin.
Üst bilgi ve alt bilgiye bir arka plan rengi (beyaz olmayan) ve ortalanmış metin verin.

Kullanıcı ne kadar kaydırırsa kaydırsın, üst bilgiyi ve alt bilgiyi her zaman görebilmelidir.

Kopya kağıdı

Bir yapışkan başlık (veya alt bilgi), sayfayı kaydırdığınızda sayfanın üstünde (veya altında) görünür kalarak navigasyonun veya önemli bilgilerin her zaman erişilebilir olmasını sağlar.

position: sticky veya position: fixed kullanarak yapışkan öğeler oluşturun:

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

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>