We are releasing one open source component every week, don’t miss it!
Follow us!

Web Components On Fire

View the source

Shy Header

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.

Shy Header

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.