Header y Footer sticky

Parte de la sección Practical Frontend del Journey de HTML de Coddy — lección 30 de 35.

Un encabezado fijo (o pie de página) permanece visible en la parte superior (o inferior) de la página cuando te desplazas. Esto hace que la navegación o la información importante estén siempre accesibles sin que el usuario necesite volver a desplazarse hacia arriba.

Se utiliza comúnmente para:

Barras de navegación de sitios web (encabezado fijo)
Barras de «Comprar ahora» o «Contacto» (pie de página fijo)
Aplicaciones móviles donde las acciones clave deben permanecer en pantalla

Puedes crear un encabezado o pie de página fijo usando position: sticky o position: fixed.

Ejemplo (Encabezado fijo)

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; /* solo para crear desplazamiento */
}

Desafío

Fácil

Se te proporciona una página HTML con un encabezado, un pie de página y contenido principal. Tu tarea es hacer que el encabezado y el pie de página sean sticky (pegajosos) para que siempre permanezcan visibles. Tu tarea:

Haz que el header se pegue a la parte top de la página.
Haz que el footer se pegue a la parte bottom de la página.
Asigna al encabezado y al pie de página un color de fondo (que no sea blanco) y texto centrado.

El usuario siempre debe ver el encabezado y el pie de página, sin importar cuánto se desplace por la página.

Hoja de referencia

Un encabezado fijo (o pie de página) permanece visible en la parte superior (o inferior) de la página cuando te desplazas, haciendo que la navegación o la información importante estén siempre accesibles.

Crea elementos fijos usando position: sticky o 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;
}

Pruébalo tú mismo

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