Faking fixed menu toggle on scroll (CSS)

[tpr]

I've used JavaScript to check the scroll position and show/hide the menu toggle (hamburger icon). Recently though I found out that I can fake it with CSS.

The idea is having a header element that is full-width with a background color and covers the fixed position toggle button. On scroll the button is revealed.

Of course this technique can't be applied to any site, although in the majority of my projects I could have used it.

Before you ask I use no JavaScript to show the mobile menu, it's shown using the :checked technique.