Im trying to make a Webpage with a banner so that when you scroll the content comes from the bottom and keeps sticking right under the upper half of the banner.

I immediately came up with the easy and ugly idea, that the content-box would have the size of the screen, a big `margin-top` and `overflow-y: scrolling`, but as I said...it would be the ugly way.

Thus my main problem is to achieve this and still have one single scroll-bar. I think the header has to be `position: fixed`...has anyone an css / more mobile friendly idea?
![](https://i.stack.imgur.com/UrMPv.png)

**EDIT:**

As requested a JSFiddle to play with: <http://jsfiddle.net/r2gbyjcs/>