Решение перекрытия контента фиксированным заголовком в HTML

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

Для того чтобы корректировать положение якоря и предотвратить его скрытие под фиксированным заголовком, можете применить создание псевдоэлемента при помощи CSS:

.anchor::before {
  content: '';
  display: block;
  height: 0;
  margin-top: -100px; /* Высота вашего заголовка */
  padding-top: 100px; /* Значение, равное высоте заголовка */
  visibility: hidden;
  pointer-events: none;
}

Установите класс .anchor для элементов, которые выделены в качестве якорей. Отрицательное значение margin-top обеспечивает смещение на необходимую величину, а padding-top компенсирует его, давая возможность контенту под заголовком оставаться видимым при переходе по ссылке. Выставите значения margin-top и padding-top, согласованные с высотой вашего заголовка, чтобы корректно отобразить якорь.

Управление отзывчивостью и обеспечение кроссбраузерности

Отзывчивый дизайн: адаптация под изменения устройств

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

.anchor::before {
  margin-top: calc(-1 * var(--header-height)); /* Крайне рекомендуется хранить высоту заголовка в переменной CSS */
  padding-top: var(--header-height);
}

Для хранения значения высоты заголовка используйте переменную --header-height в корневом элементе CSS:

:root {
  --header-height: 5em; /* Примерное значение, которое можно подменить на реальную высоту вашего заголовка */
}

Для адаптации смещения под размеры видимой области советуется динамически настроить эти величины при помощи JavaScript в сочетании с медиа-запросами, меняя значение --header-height.

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

Совместимость браузеров: обеспечение плавной навигации

Существуют свойства CSS scroll-margin-top и scroll-padding-top, поддерживаемые большинством современных браузеров. Все же, стоит выработать запасной вариант для устаревших браузеров. Ниже представлен пример кода на JavaScript, позволяющий корректно расчитать смещение:

window.addEventListener('hashchange', function() {
  var fixedHeaderHeight = document.querySelector('.fixed-header').offsetHeight;
  window.scrollTo(window.scrollX, window.scrollY – fixedHeaderHeight);
});

Высокоточное позиционирование

Управление точностью смещений и прозрачные разделители

Свойство scroll-padding-top позволяет точно контролировать расстояния прокрутки при переходе к якорю. Для достижения лучших результатов следует применять этот параметр в CSS.

:root {
  scroll-padding-top: var(--header-height);
}

Визуальное смещение также можно улучшить при помощи прозрачного разделителя:

<div class="spacer" style="height: 100px;"></div><!-- Высота, соответствующая вашему заголовку -->

Размещайте в верстке контейнеры-якоря с относительным позиционированием и отрицательным верхним отступом равным высоте заголовка:

<div class="anchor-container" style="position: relative; top: -100px;"></div>

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

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

Зрители: [👩🎶, 👨🎤, 🧑🎸, 👩🎹]
Место назначения: 👨🎤

Но крыша предотвращает хороший вид:

🎪...👨🎤...? (Исполнитель скрыт за крышей)

В такой ситуации устанавливается "вышка наблюдения" (верхние поля):

🎪 + Вышка наблюдения (Поля): [👀🎶, 👀🎤, 👀🎸, 👀🎹]
Место назначения (Исполнитель): 👀🎤

Таким образом, даже с крышей сцены, исполнитель остается видимым для всех.

Точность при использовании семантического HTML и идентификаторов

Применяйте разным идентификаторам для якорей и сопоставите их соответствующим разделам сайта, основываясь на стилях CSS и обеспечивая точное направление навигации:

<a href="#section1">Раздел 1</a>
...
<div id="section1-anchor" class="anchor"></div>
<section id="section1">Содержимое Раздела 1</section>

Структура HTML-документа, организованная в соответствии с принципами семантики, способствует лучшему порядку в документе, его доступности и решению проблемы перекрытия контента.

Умелое использование прокрутки

Контроль над точкой остановки и смещением

Свойство scroll-snap-type в CSS устанавливает точку остановки после прокрутки, упрощая навигацию.

Используйте это свойство вместе с JavaScript для создания эффекта плавного смещения, учитывая высоту фиксированного заголовка:

document.querySelector('.anchor').addEventListener('click', (e) => {
  e.preventDefault();
  let target = document.querySelector(e.target.getAttribute('href'));
  let headerOffset = document.querySelector('.fixed-header').offsetHeight;
  let elementPosition = target.offsetTop;
  window.scrollTo({
    top: elementPosition – headerOffset,
    behavior: 'smooth'
  });
});

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

1. MDN Web Docs – Scroll Padding — документация по CSS-свойству scroll-padding-top, предназначенном для корректировки положения якорей.
2. W3C CSS Scroll Snap Module — официальная спецификация от W3C на тему технологии прокрутки страницы.
3. html – Перекрытие якорей фиксированным заголовком страницы – Stack Overflow — обсуждение проблемы перекрытия якорей в сообществе разработчиков с множеством предложенных решений.
4. Scrollspy · Bootstrap — функционал Bootstrap для обновления ссылок навигации по мере прокрутки страницы.
5. GitHub – scroll-into-view/scroll-into-view-if-needed — полифилл для более гибкого контроля над поведением прокрутки страницы.