📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again only when scrolling up again.

By adding a long transition-delay to a CSS property under certain conditions (which you can do using a Style Query), you can persist its value.

🔗 https://brm.us/scroll-driven-header

Demo by @fcalderan.