Отступы блока при скролле

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

<section class="page-section">
  <div class="main-container">
    <h2 class="page-section__heading">
      <span class="page-section__name">Experience</span>
      <span class="page-section__hint">More about my experience</span>
    </h2>
    <div class="page-section__content">
      <!-- здесь находится контент раздела -->
    </div>
</section>

Корректное значение отступа будет рассчитываться, как сумма высоты блока с навигацией (75px) и внутреннего отступа между верхней границей раздела и заголовком (9rem). За суммирование в CSS отвечает функция calc(). Добавим её к заголовку вместе со свойством scroll-margin-top.

.page-section {
  padding-top: 9rem;
}
 
.page-section__heading {
  scroll-margin-top: calc(9rem + 75px);
}