Как добавить отступ к прокрутке (html, css)

Question

У меня есть несколько секций с айди и кнопки, которые позволяют по этим секциям перемещаться. А еще, у меня есть хедер, который половину секции закрывает. Вопрос в том, как добавить верхний отступ для прокрутки, или что-то, что позволило бы сделать так, чтобы секция начиналась с хедера, а не под ним. Заранее благодарю за помощь. upd. полный код слишком большой, так что описал сам принцип:

.header {
  height: 80px;
  background-color: red;
  position: sticky;
  top: 0;
  width: 100%;
}

#section1, #section2, #section3{
  height: 300px;
  font-size: 2rem;
  color: #fff;
}
#section2 {
  background-color: blueviolet;
}
#section3 {
  background-color: seagreen;
}

<header class="header"></header>
<nav class="nav__buttons">
<a class="nav__button" href="#section1">Секция 1</a>
<a class="nav__button" href="#section2">Секция 2</a>
<a class="nav__button" href="#section3">Секция 3</a></nav>
<article class="scroller">
    <section class="slider-block" id="section1">Этот текст должен быть виден полностью после клика по ссылке</section>
    <section class="slider-block" id="section2">Этот текст должен быть виден полностью после клика по ссылке</section>
    <section class="slider-block" id="section3">Этот текст должен быть виден полностью после клика по ссылке</section>
</article>

upd3. я, вероятно, плохо обьяснил проблему, и совершенно точно прикрепил ужасный код. теперь всё нормально, и проблема, похоже, должна быть более ясна

Answer 1

Предлагаю использовать position: sticky. Поменял в вашем коде эту строчку и обнулил поля у body.

Поддержка: 96%

    body {
      margin: 0;
    }
    
    .header {
        height: 80px;
        background-color: red;
        position: sticky;
        top: 0;
        right: 0;
        width: 100%;
    }
    
    #section1 {
        height: 300px;
        color: aqua;
    }
    #section2 {
        height: 300px;
        color: blueviolet;
    }
    #section3 {
        height: 300px;
        color: seagreen;
    }

<header class="header">Header</header>
    <nav class="nav__buttons">Nav
      <a class="nav__button" href="#section1">Секция 1</a>
      <a class="nav__button" href="#section2">Секция 2</a>
      <a class="nav__button" href="#section3">Секция 3</a>
    </nav>
    <article class="scroller">
        <section class="slider-block" id="section1">section1</section>
        <section class="slider-block" id="section2">section2</section>
        <section class="slider-block" id="section3">section3</section>
    </article>

Второй вариант -- для нового ТЗ, где хэдер вообще никогда не должен перекрывать контент.

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
    min-height: 80px;
    background-color: red;
}

.content {
  overflow-y: scroll;
}

#section1 {
    height: 300px;
    color: aqua;
}
#section2 {
    height: 300px;
    color: blueviolet;
}
#section3 {
    height: 300px;
    color: seagreen;
}

<div class="page">
  <header class="header">
    <nav class="nav__buttons">Nav
      <a class="nav__button" href="#section1">Секция 1</a>
      <a class="nav__button" href="#section2">Секция 2</a>
      <a class="nav__button" href="#section3">Секция 3</a>
    </nav>
  </header>
  <main class="content">
    <article class="scroller">
        <section class="slider-block" id="section1">section1</section>
        <section class="slider-block" id="section2">section2</section>
        <section class="slider-block" id="section3">section3</section>
    </article>
  </main>
</div>

БЛОГ НА HUSL

Как добавить отступ к прокрутке (html, css)

Ответы (1 шт):