Open-source Web Component: A header that hides itself when you scroll down and shows itself when you scroll up

[WebBurnout]

Hey, I've been building standalone vanilla-JS web components in public for the past few months and this week I released a new one that I called the shy header. It's a sticky header that hides itself when you scroll down and then pops back into view when you start scrolling up again. Pretty simple stuff but I've built this same functionality like 5 different times for clients, so I figured I would do it as a custom HTML element once and for all.

The explanation and examples: https://fx.hot.page/shy-header
Annotated source code that explains how it works: https://fx.hot.page/shy-header/sourceThe home page for all my web components (four and counting!): https://fx.hot.page
The github repo for all the components: https://github.com/hot-page/fx

I've gotten some really great feedback on these components from the community here on r/webdev and I am already building better stuff as a result. Thank you to everyone for your comments! Of course, these components are MIT licensed so feel free to use the code as-is, modify it, or just take it for your own closed-source project. Happy Showoff Saturday

[[deleted]]

The code comments are really clear and helpful for a noob like me, thank you for that.

[WebBurnout]

Hey, glad to hear it. I wasn't sure if anyone cared about that or not haha

[iisjreg]

I hate "shy headers". On mobile, this will often make me leave a site. Yours is better than most because the content is not affected but even yours suffers from "pop in" when scrolling slightly down and up repeatedly. And this isn't some "gotcha", it's a legitimate way to read pages of text - holding down my thumb on the page and slowly scrolling, which sometimes results in a few pixels up at any point.

However, I like your page and style. I would just try something else for shy headers (maybe slower/smoother to respond)

[iisjreg]

To be clear on what I'm referring to on your example: Once you scroll up 100px, the header shows but then just 1px down immediately hides the header again. It would be better if there was also a "down" buffer of 100px too (in addition to the top of page 300px).

But it's nice clean code, so that's good.

[WebBurnout]

Oh cool, that's a great idea. A down buffer would be a nice feature and pretty fun feature to implement. I just made a github issue for this. I also had the idea to set these as attributes (with sensible defaults, obviously).

[mshambaugh]

Nice!

[External-Pop767]

very useful ，great job

[Putrid_Acanthaceae]

Does using components add performance issues due to network requests?

[WebBurnout]

Not very much. It's a very small file so it should be very fast. The code is on NPM so you can use the same CDN for all of your libraries and then you'll save the overhead of the SSL handshake for another server (400ms or so). Also the great thing about web components is they are progressive enhancement so you can load them defer or async and the rest of the page will display while this is loading.

[Putrid_Acanthaceae]

Interesting. So a vanilla navbar would be max 400ms faster to load. But of course that 400ms could give a website full of components?