Scroll divs over each other on pagescroll

Scroll divs over each other on pagescroll

I have a HTML-page with four DIV's wich are fullscreen. When I scroll using the scrollbar, I want the current DIV to stay at its position (if scrolled to the end of that DIV) and the next one slides over it. Someone came up with this example:  http://jsfiddle.net/d6rKn/  but the problem is that (because of the position:fixed) it won’t work on an iPad. Is there a workaround for this?

Also, the first div's content is bigger than the div itselfs. Is it possible to let a visitor first scroll to the end of this div and when it reaches the end, slide the next one over it? (instead of sliding the next one immediately over the current one...