رأس وتذييل صفحة مثبتان

جزء من قسم Practical Frontend في رحلة HTML على Coddy. الدرس 30 من 35.

يبقى sticky header (أو footer) ظاهرًا في top (أو bottom) الصفحة عند إجراء scroll. وهذا يجعل التنقل أو المعلومات المهمة متاحة دائمًا من دون حاجة المستخدم إلى العودة بالتمرير.

يُستخدم عادةً من أجل:

Website أشرطة التنقل (sticky header)
أشرطة “اشترِ الآن” أو “Contact” (sticky footer)
تطبيقات الهاتف المحمول حيث يجب أن تبقى الإجراءات key على الشاشة

يمكنك إنشاء Header أو Footer ثابت باستخدام position: sticky أو position: fixed.

مثال (رأس Sticky)

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 */
}

التحدي

سهل

تُعطى صفحة HTML تحتوي على header وfooter ومحتوى main. مهمتك هي جعل header وfooter sticky بحيث يظلان مرئيين دائمًا. مهمتك:

اجعل header يلتصق بـ top الصفحة.
اجعل footer يلتصق بـ bottom الصفحة.
امنح header وfooter لون background (ليس أبيض) ونصًا في المنتصف.

يجب أن يرى المستخدم header وfooter دائمًا، بغض النظر عن مقدار scroll.

جرّب بنفسك

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