Web Components On Fire
Headers are pretty useful for web pages: they orient readers and provide a home for navigation links while reinforcing brand. This is essential stuff and making your header stick to the top of the page is a common practice.
However, screen real estate and attention are precious and you might
not want to see your header all the time. The
<hotfx-shy-header> element gives us the best of both
worlds: hide the header while the reader is scrolling down, show it
again once they start scrolling up.
To use the custom element yourself, add this script to your page:
Then just wrap your content in a <hotfx-shy-header>
element. That’s all it takes for this to work.
However, there is a big gotcha here: you should probably keep the
header as a direct child of the <body> tag. The position
property and in particular position: sticky keeps the
header at the top of the window as you scroll, but it will always stay
inside its parent element. If you notice that your header is not
sticking to the top of the screen when you scroll, that is probably the
reason.
You may also notice that the menu doesn’t appear right away as you start scrolling up. This is to prevent the menu from accidentally showing itself when you are scrolling up just a tiny bit by accident. In fact, you have to scroll 100px up before the header will appear.
That’s about all there is to say about this component. It’s very simple in keeping with the idea of single-purpose one-off components in HotFX, but if you think it lacks certain features, please file an issue on GitHub and let’s talk about it.