Фиксированный header при прокрутке: решение без framesets

Быстрый ответ

Если вы хотите, чтобы шапка сайта всегда оставалась на экране в верхней его части независимо от прокрутки страницы, вам необходимо прописать для неё в CSS следующие параметры: position: fixed; и top: 0;. Чтобы ваша шапка была всегда видна на фоне остального контента, используйте параметр z-index и присвойте ему достаточно высокое значение:

.header {
  position: fixed;
  top: 0;
  width: 100%; /* Шапка займёт всю ширину окна браузера */
  z-index: 1000; /* Высокое значение, чтобы шапка была всегда на первом плане */
}

Теперь приложите этот CSS-код к элементу, представляющему шапку вашего сайта:

<div class="header">Я на вершине мира!</div>

Не забудьте учесть, что прибавление к элементу свойства position: fixed; изымает его из нормального потока документа. поэтому нужно добавить к основному контенту страницы отступ сверху (с помощью параметра margin-top), равный высоте шапки. Это предотвратит перекрытие основного контента шапкой и сделает содержимое сайта лучше читаемым.

Как это сделать: варианты и соображения

Улучшенный вариант: "липкая" шапка

Если вам необходимо, чтобы шапка страницы перемещалась вместе с прокруткой, но "прилипала" к верху экрана при достижении определённой точки, примените свойство position: sticky;:

.header {
  position: sticky;
  top: 0;
  z-index: 10; /* Не так высокое значение как в "фиксированном" варианте, но всё же выше обычного контента */
}

Подробнее об этом расскажет наш спикер на видео

Когда "липкость" необходима

• Используйте значение свойства position, отличное от static.
• Задать параметр смещения (top, bottom, left, right), чтобы указать, от какой из сторон контейнер должен "прилипать" к границе окна браузера.

Шапка на всю ширину экрана

Параметр width: 100%; обеспечивает распространение шапки на всю ширину окна браузера.

Индивидуальное оформление

Добавьте к шапке индивидуальное оформление – фоновый цвет background-color, тени box-shadow, чтобы она привлекала внимание.

Bootstrap для быстрых результатов

Если вы используете Bootstrap, просто примените класс .navbar-fixed-top, чтобы быстро настроить фиксацию шапки.

Анимация для привлекательности

Хорошей практикой является использование jQuery и добавление анимации. Например, вы можете создать эффект постепенного исчезновения шапки. Главное – не переусердствовать с эффектами.

Проверка стабильности

Последовательно тестируйте вашу шапку на различные устройства и контенты, чтобы убедиться, что она корректно работает и визуализируется, без конфликтов с другими элементами приложения.

Простота – залог надёжности

Для обеспечения высокой производительности сайта и снижения зависимости от JavaScript, предпочитайте использовать чистый CSS для создания статичных или "липких" шапок.

Визуализация

Рассмотрим web-страницу как разнообразный базар:

Используя CSS для фиксации шапки:

.header { position: fixed; top: 0; width: 100%; }

Вы фактически зафиксировали "вывеску" базара на одном месте, чтобы она всегда была видна:

👑: Вывеска всегда на виду.
🛍️: Прилавки и лотки меняются по мере вашего движения.

С помощью фиксированной или "липкой" шапки, которая всегда остается в поле зрения, как финишная черта для бегуна, навигация по сайту становится значительно удобнее и прозрачнее.

Дополнительные рекомендации для вашего макета

Учёт безопасных зон

Не забывайте о env(safe-area-inset-*) для идеального отображения шапки на всех устройствах, включая те, у которых есть кривизны или закругления на экране.

Улучшение доступности

Используйте тег <header> и ARIA-роли для оптимизации индексации поисковиками и улучшения пользовательского взаимодействия, особенно для людей с ограниченными способностями.

Контроль переполнения контента

Используйте position: sticky и position: fixed, чтобы избежать резких смещений содержимого при прокрутке.

Полезные материалы

1. Свойство CSS position — Обзор свойства position.
2. Полное руководство по Flexbox | CSS-Tricks — Осваиваем flexbox.
3. Основы flexbox-макета – CSS: Каскадные таблицы стилей | MDN — Изучаем flexbox с нуля.
4. Свойство z-index в CSS: что нужно знать — Smashing Magazine — Комплексный анализ свойства z-index.
5. CSS "position: sticky": что это и как обойти ограничения — SitePoint — Использование position: sticky для создания "липкой" шапки без использования JavaScript.
6. Создание фиксированного меню — Пошаговая инструкция по созданию фиксированного меню.
7. Свойство CSS position: sticky и его использование для фиксации элементов | DigitalOcean — Создаем фиксированные элементы с помощью CSS-свойства position: sticky.