Question 188364 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How make sticky header for tabs with scroll position?

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

Tags:

2

Answers


  1. 0

    You can show loading, until all the pages are loaded

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search