Header / Footer Sticky

Parte da seção Practical Frontend do Journey de HTML da Coddy — lição 30 de 35.

Um cabeçalho fixo (ou rodapé) permanece visível no topo (ou na parte inferior) da página quando você rola. Isso torna a navegação ou informações importantes sempre acessíveis sem que o usuário precise rolar de volta.

É comumente usado para:

Barras de navegação de sites (cabeçalho fixo)
Barras de “Comprar agora” ou “Contato” (rodapé fixo)
Aplicativos móveis onde as ações principais devem permanecer na tela

Você pode criar um cabeçalho ou rodapé fixo usando position: sticky ou position: fixed.

Exemplo (Cabeçalho Fixo)

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; /* apenas para criar rolagem */
}

Desafio

Fácil

Você recebeu uma página HTML com um cabeçalho, um rodapé e o conteúdo principal. Sua tarefa é tornar o cabeçalho e o rodapé sticky (fixos) para que eles permaneçam sempre visíveis. Sua tarefa:

Faça o header fixar-se no top da página.
Faça o footer fixar-se na parte bottom da página.
Dê ao cabeçalho e ao rodapé uma cor de fundo (que não seja branca) e texto centralizado.

O usuário deve sempre ver o cabeçalho e o rodapé, não importa o quanto ele role a página.

Folha de consulta

Um cabeçalho fixo (ou rodapé) permanece visível no topo (ou na parte inferior) da página quando você rola, tornando a navegação ou informações importantes sempre acessíveis.

Crie elementos fixos usando 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;
}

Experimente você mesmo

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