I’m trying to make a site with multiple sections. There are logos, that should take up the full screen. Then, as the user scrolls down, the logos should get smaller and shrink to the top of the screen, staying fixed to the top. They should push the section contents down so that they are fully visible.
The user can continue scrolling down to the next section. It should once again be the full page height, taking up the user’s entire screen. It should push the previous logo header up out of the way, and repeat the same process, as the user scrolls down, it should get smaller, moving to the top of the screen, leaving space for the contents of the section.
However, unfortunately, the headers seem to be very jittery when I try to scroll down. The scrolling can even get stuck without moving the scrollbar with the mouse.
I have also found that after I scroll down past the second section, the first header pops up again.
Here is my site, with the minimal code to reproduce this problem:
The Site
The code is mainly copied from two w3schools tutorials, I have been trying to combine the two:
https://www.w3schools.com/howto/howto_js_sticky_header.asp
https://www.w3schools.com/howto/howto_js_shrink_header_scroll.asp
Any help would be greatly appreciated, and if anyone has any ideas on how this could be fixed, please, let me know!
Thanks!