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

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

يظل الرأس المثبت (أو التذييل) مرئياً في الجزء العلوي (أو السفلي) من الصفحة عند التمرير. وهذا يجعل التنقل أو المعلومات المهمة متاحة دائماً دون حاجة المستخدم إلى التمرير مرة أخرى للأعلى.

يُستخدم بشكل شائع لـ:

أشرطة التنقل في المواقع الإلكترونية (رأس الصفحة الثابت)
أشرطة "اشترِ الآن" أو "اتصل بنا" (تذييل الصفحة الثابت)
تطبيقات الهاتف المحمول حيث يجب أن تظل الإجراءات الرئيسية على الشاشة

يمكنك إنشاء رأس أو تذييل ثابت باستخدام position: sticky أو 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>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; /* فقط لإنشاء التمرير */
}

التحدي

سهل

لقد تم تزويدك بصفحة HTML تحتوي على رأس (header)، وتذييل (footer)، ومحتوى رئيسي. مهمتك هي جعل الرأس والتذييل sticky (مثبتين) بحيث يظلان مرئيين دائمًا. مهمتك هي:

اجعل الـ header يلتصق بـ top (أعلى) الصفحة.
اجعل الـ footer يلتصق بـ bottom (أسفل) الصفحة.
امنح الرأس والتذييل لون خلفية (ليس أبيض) ونصًا ممركزًا في المنتصف.

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

ورقة مرجعية

يظل **الرأس الثابت** (أو التذييل) مرئيًا في الجزء العلوي (أو السفلي) من الصفحة عند التمرير، مما يجعل التنقل أو المعلومات المهمة متاحة دائمًا.

قم بإنشاء عناصر ثابتة باستخدام position: sticky أو 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;
}

جرّب بنفسك

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