How make sticky header for tabs with scroll position?

Question

I need sticky header tab from start spot until end of the tab section. like this site Currently, by using eventListener on the scroll, I made it possible for the header to become sticky, but I have several problems:

1. The scroll remains sticky after the tab section is finished
2. When I scroll the page again the tab stickiness to the top is not removed Where is the problem in my code?

this is my code in Sandbox

Answer 1

You can show loading, until all the pages are loaded

Answer 2

Just put the header inside the section you want it to be sticky and add position:sticky; top:0; to the header.

.container {
  background: gray;
}

.sticky {
  position: sticky;
  top: 0;
  background: yellow;
}

<section class="container">
  <h1 class="sticky">Sticky</h1>
  <div>
    <h1>div 1</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing
      elit. Non error at hic dolore aspernatur impedit dolorem similique incidunt pariatur! Atque adipisci fugiat aperiam qui excepturi doloremque, quaerat quisquam similique molestiae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error
      at hic dolore aspernatur impedit dolorem similique incidunt pariatur! Atque adipisci fugiat aperiam qui excepturi doloremque, quaerat quisquam similique molestiae.
    </p>
  </div>
  <div>
    <h1>div 2</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing
      elit. Non error at hic dolore aspernatur impedit dolorem similique incidunt pariatur! Atque adipisci fugiat aperiam qui excepturi doloremque, quaerat quisquam similique molestiae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error
      at hic dolore aspernatur impedit dolorem similique incidunt pariatur! Atque adipisci fugiat aperiam qui excepturi doloremque, quaerat quisquam similique molestiae.
    </p>
  </div>
  <div>
    <h1>div 3</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing
      elit. Non error at hic dolore aspernatur impedit dolorem similique incidunt pariatur! Atque adipisci fugiat aperiam qui excepturi doloremque, quaerat quisquam similique molestiae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error
      at hic dolore aspernatur impedit dolorem similique incidunt pariatur! Atque adipisci fugiat aperiam qui excepturi doloremque, quaerat quisquam similique molestiae.
    </p>
  </div>
</section>

<div>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing
    elit. Non error at hic dolore aspernatur impedit dolorem similique incidunt pariatur! Atque adipisci fugiat aperiam qui excepturi doloremque, quaerat quisquam similique molestiae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error
    at hic dolore aspernatur impedit dolorem similique incidunt pariatur! Atque adipisci fugiat aperiam qui excepturi doloremque, quaerat quisquam similique molestiae.
  </p>
</div>
<div>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing
    elit. Non error at hic dolore aspernatur impedit dolorem similique incidunt pariatur! Atque adipisci fugiat aperiam qui excepturi doloremque, quaerat quisquam similique molestiae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error
    at hic dolore aspernatur impedit dolorem similique incidunt pariatur! Atque adipisci fugiat aperiam qui excepturi doloremque, quaerat quisquam similique molestiae.
  </p>
</div>
<div>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing
    elit. Non error at hic dolore aspernatur impedit dolorem similique incidunt pariatur! Atque adipisci fugiat aperiam qui excepturi doloremque, quaerat quisquam similique molestiae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error
    at hic dolore aspernatur impedit dolorem similique incidunt pariatur! Atque adipisci fugiat aperiam qui excepturi doloremque, quaerat quisquam similique molestiae.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error at Lorem ipsum dolor sit amet consectetur adipisicing
    elit. Non error at hic dolore aspernatur impedit dolorem similique incidunt pariatur! Atque adipisci fugiat aperiam qui excepturi doloremque, quaerat quisquam similique molestiae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non error
    at hic dolore aspernatur impedit dolorem similique incidunt pariatur! Atque adipisci fugiat aperiam qui excepturi doloremque, quaerat quisquam similique molestiae.
  </p>
</div>