Creating a fixed container similar to mobile Gmail

I want to create a fixed container that attaches to the top of the viewport on mobile browsers, specifically on iOS and Android devices. Gmail has an awesome fixed menu bar on their mobile site, but it only seems to function correctly when you actually view it on a mobile device (so I am not able to trace how this is being accomplished).

Does anyone know how Gmail is accomplishing this?

I'm currently attaching a function to window.onscroll that changes the position of the div, but as it is right now, it doesn't continuously update the position. Once you start scrolling, the repositioning doesn't happen until after you stop scrolling. This is what I'm trying to overcome. The repositioni开发者_Go百科ng function itself works correctly - it's more of a timing issue.

Any suggestions?

Google wrote an article about their approach.

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

I'm pretty sure that you can do this using jquery mobile or just regular css. You can find more info about jq mobile here: http://jquerymobile.com/ . I'm not sure offhand the plain css you can use but I know it's possible to attach something to the top like a toolbar.