Sticky Header / Footer

Часть раздела 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) страницы.
Задайте элементам header и footer цвет фона (не белый) и центрированный текст.

Пользователь должен всегда видеть заголовок и подвал, независимо от того, как сильно он прокручивает страницу.

Шпаргалка

Липкий заголовок (или футер) остается видимым в верхней (или нижней) части страницы при прокрутке, делая навигацию или важную информацию всегда доступной.

Создавайте липкие элементы, используя 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>