Create static horizontal scrolling

Question

I'm trying to develop an horizontal scrolling for a landing page. I'm trying information that I found here. But I want to make something similar, but not exactly that...

In that Web page, we have two elements: We can see we have a menu, and an horizontal list of boxes. This list works as expected: if you press on a link on the menu, it jumps to the correct box. If you go to a mobile browser, it scrolls right and left using your hand.

But, when you scroll right with the mobile browser, the menu on the top, stays at the left of the layer, disapearing from the visible part of the Web. If you do so with a computer browser, the menu stays always at top left.

I want the menu to always stay at top, even if I'm using a mobile browser, so I can scroll, let's say, some images, without hiding left the content of my Web Page.

How can I do so?

I hope I explained myself correctly. If you also think there's an easier way to make a scroll horizontal, I'm open to suggestions.

PS: I want a kind of result like this:

Answer 1

Mobile browsers have issues with fixed positioning - see this article which also provides a list of JavaScript Solutions.