当滚动与它们相交时，如何制作粘性 header？

Question

I have this code to make a sticky header. But it only works for the first element with the .header class. How can I make this effect for each of the elements with the .header class?

 window.onscroll = function() {myFunction()}; var header = document.querySelector(".header"); var sticky = header.offsetTop; function myFunction() { if (window.pageYOffset > sticky) { header.classList.add("sticky"); } else { header.classList.remove("sticky"); } }

 html,body,h1{ padding:0px; margin:0px; }.header{ border:1px solid red; }.sticky { position: fixed; top: 0; width: 100%; background:white; }.sticky +.content { padding-top: 102px; }

 <h1 class="header">title1</h1> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. </div> <h1 class="header">title2</h1> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. </div> <h1 class="header">title3</h1> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. </div>

Answer 1

You actually don't need any JavaScript for this. Just use position: sticky; with top: 0 on the .header class to make this work. Make sure you set the background to white so that the text does not overlap, either.

jsfiddle here: https://jsfiddle.net/wmL71xqu/2/