Смещение html поведение прокрутки

Question

У меня есть следующий макет:

html {
  scroll-behavior:smooth;
}

header {
  height: 234px;
  position: sticky;
  top: 0;
  padding: 24px;
  background-color: rgba(255,255,255,0.5);
  border-bottom: 1px solid #dedede;
}

nav {
  height: 88px;
  position: sticky;
  top: 234px;
  padding: 24px;
  background: #f5f5f5;
}

section {
  height: 100vh;
  text-align: center;
}

<header>
  <p>I'm the header</p>
</header>

<section>
  <p>I'm a video</p>
</section>

<nav>
  <a href="#1">Section 1</a>
  <a href="#2">Section 2</a>
  <a href="#3">Section 3</a>
</nav>

<section id="1">
  <p>I'm section 1</p>
</section>

<section id="2">
  <p>I'm section 2</p>
</section>

<section id="3">
  <p>I'm section 3</p>
</section>

Как видите, у меня есть главный заголовок вверху страницы с position: sticky;. Затем у меня есть <nav> дальше вниз по странице, которая находится под основным заголовком. Затем можно щелкнуть ссылки для прокрутки к каждой <section>.

При нажатии на каждую ссылку в <nav> каждая <section> прокручивается до самой верхней части страницы.

Is Есть ли способ сместить верхнюю позицию? В этом случае мне потребуется смещение от вершины на 322 пикселя (<header> и <nav> высоты вместе).

Я попытался добавить псевдоэлемент :before к каждому <section> с помощью высота 322 пикселя, но это не работает.

Answer 1

Это немного хакерски, но работает для вашего случая.
Добавьте класс .section для каждого раздела и интервал внутри с идентификатором.

<nav>
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
  <a href="#section3">Section 3</a>
</nav>

<section class="section">
  <span id="section1"></span>
  <p>I'm section 1</p>
</section>

<section class="section">
  <span id="section2"></span>
  <p>I'm section 2</p>
</section>

<section class="section">
  <span id="section3"></span>
  <p>I'm section 3</p>
</section>

Затем, абсолютно позиционируйте каждый span 322px up.
Также необходимо добавить z-index к заголовку и nav из-за относительного положения секций.

.section {
  position: relative;
}
.section span {
  top: -322px;
  pointer-events: none;
  position: absolute;
}
header, nav {
  z-index: 1;
}

Answer 2

Как насчет добавления:

section {
  padding-top: 370px;
}

<header> + <nav> на самом деле 370px. 234px + 88px + 2x24px отступов. 2, а не 4, потому что между ними свертывается отступ.