To make it visible on page load, you need to (1) check the box visible on page load, and then (2) create conditional logic to hide the element when current page > header’s previous.
I made 2 adjustments to make this smoother:
- Changed the listening loop to every 1 second (it was fairly jagged at 0.1 seconds)
- Set a minimum height at which the header could be collapsed - otherwise, it was flakey - if you scrolled back up the page and made any small movement it was hard to get the header back.
(Note in the screenshot below I also have logic to only do this on smaller screen sizes but disregard if you want it for desktop too)
