En-tête / Pied de page Sticky

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 30 sur 35.

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

Il est couramment utilisé pour :

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

Vous pouvez créer un en-tête ou un pied de page collant en utilisant position: sticky ou position: fixed.

Exemple (En-tête collant)

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; /* juste pour créer du défilement */
}

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 sticky (collants) afin qu'ils restent toujours visibles. Votre tâche :

Faites en sorte que le header reste collé en top de la page.
Faites en sorte que le footer reste collé en bottom de la page.
Donnez au header et au footer 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, quel que soit le défilement.

Aide-mémoire

Un en-tête collant (ou pied de page) reste visible en haut (ou en bas) de la page lorsque vous faites défiler, rendant la navigation ou les informations importantes toujours accessibles.

Créez des éléments collants en utilisant position: sticky ou 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;
}

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>