How was Sitepoint's mobile menu/header built?

I’ve been looking for a way to execute the functionality of Sitepoint’s mobile header for months. It’s the way all sticky mobile headers should work, imho. It disappears as you scroll down, leaving more viewable page, but comes right back into view as soon as you start scrolling up. Love it. Can you share the code, please?

Hi tdaguanno welcome to the forum

I have a feeling this isn’t what you wanted, but Discourse is open source and you are free to use its code. eg.
https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/components/mobile-nav.js.es6

1 Like

Thanks. I think you’re correct. It seems to control how the menu itself operates, but not the sticky/hiding functionality. I’m not a coder by any means, so I could be wrong on that! :slight_smile:

This tutorial should show all that you need to accomplish that effect.

2 Likes

Thanks! I believe I saw that some time ago and opted not to use it because of the ‘polling’ overhead. Sitepoint’s mobile header seemed to work differently in that it seemed to be ‘locked’ to the page instead of animated up or down. I was guessing that it didn’t use polling. Weird thing is, today I looked at Sitepoint’s mobile header again and it no longer works as before. Further, it seems to work differently every time I load it, so maybe someone is tweaking it at the moment.

I accidentally made a sticky mobile header function behave the ‘locked’ way I when I changed margins on a page. Problem was, the page moved side to side, too. Couldn’t remember how I did it as I was just playing with Chrome dev tools at the time on some random site.

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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.