fixed header/footer code, incomplete

I'm trying to create a fixed header/ footer for mobile, while having the content in between still scrollable. Anyone who has tried will know that position:fixed doesn't work on mobile, because this positions the element based on the browser window, and on a phone essentially scroll the entire browser, so the position:fixed div scrolls with it.

Google released some code showing how they implemented it, but have left some of it blank as a 'user exercise'. I cant figure out the last bits though, it's a bit beyond me! can anyone help out? or suggest a better/ simpler way of doing this? (without using jquery mobile)

google code link:

https://developers.google.com/mobile/articles/webapp_fixed_ui

thanks!