En-tête / Pied de page Sticky

Fait partie de la section Front-end pratique du Journey HTML de Coddy. Leçon 30 sur 35.

Un en-tête fixe (ou un pied de page) reste visible en haut (ou en bas) de la page lorsque vous faites défiler la page. Cela permet de garder la navigation ou les informations importantes toujours accessibles, sans que l’utilisateur ait besoin de remonter.

Il est couramment utilisé pour :

Barres de navigation du site web (en-tête fixe)
Barres « Acheter maintenant » ou « Contact » (pied de page fixe)
Applications mobiles où les actions principales doivent rester à l’écran

Vous pouvez créer un en-tête ou un pied de page fixe à l’aide de position: sticky ou de position: fixed.

Exemple (en-tête fixe)

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

Défi

Facile

On vous donne une page HTML avec un en-tête, un pied de page et un contenu principal. Votre tâche consiste à rendre l’en-tête et le pied de page fixes afin qu’ils restent toujours visibles. Votre tâche :

Faire en sorte que l’en-tête reste fixé en haut de la page.
Faire en sorte que le pied de page reste fixé en bas de la page.
Donner à l’en-tête et au pied de page une couleur d’arrière-plan (pas blanche) et un texte centré.

L’utilisateur doit toujours voir l’en-tête et le pied de page, quelle que soit la distance à laquelle il fait défiler la page.

Essayez vous-même

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