How was Sitepoint's mobile menu/header built?

Hi, I think you are confusing certain concepts here. :slight_smile:

If you want a header that is fixed to the top of the page at all times then that can be accomplished by using position:fixed (no js required). Of course that means it stays put at all times and doesn’t disappear and re-appear.

If you want an element to react to the scroll of the page then that will require JS and detecting the scroll event (which is what I assume you meant by polling). You would use js to detect the scroll event and then fix or unfix the header as required depending on whether scrolling up or down should fix or unfix the element at a required position (or indeed in any combination you may want).

There, is a third method using position:sticky but has limited support at the moment but again won’t react to hiding as you scroll down and only appearing as you scroll back up (which is what you first asked for). Position:sticky allows an element to move with the page until at some point it becomes fixed positioned.

There is no provision to accidentally lock the page using margins and a real fixed position can only be obtained by using position:fixed or position:sticky or js. You must have triggered a fixed position somewhere along the line or misinterpreted your results.

The options are clear and if you want an element to react to scroll up and scroll down in different ways then you need js. :slight_smile:

Hope that clarifies it a little.