Одна из проблем, связанных с фиксированном хэдером - это якорные ссылки. По умолчанию они привязываются к верхней части документа, которую как раз и закрывает фиксированный хэдер.

Наглядно это поведение можно увидеть на демке.

Но есть способ, позволяющий это починить.

Свойство scroll-margin-top

Свойство scroll-margin-top позволяет определить верхнее поле, которое браузер должен использовать при скролле к якорному элементу.

В демке каждый якорный элемент имеет класс .section.

<article class="section" id="a">
  <h2>Section A</h2>
</article>

.section {
  color: #ffffff;
  height: 75vh;
  margin: 0;
}

Давайте добавим к нему свойство scroll-margin-top со значением 1em:

.section {
  color: #ffffff;
  height: 75vh;
  margin: 0;
  scroll-margin-top: 1em;
}

Теперь, когда браузер переходит к якорной ссылке, он оставляет поле 1em вверху.

Это поле применяется только для привязки прокрутки. Элемент по-прежнему имеет свои обычные поля в контексте документа.

Демка