Statically positioned control bar like Gmail for iPhone web app?

When viewing Gmail with an iPhone, they have it setup so that there is a statically positioned control bar at the top of the screen. Even if you scroll up and down on the page, it doesn't move. I'm curious if anyone know how they have set this up.

As far as I have heard in the past, it isn't possible to create fixed controls using CSS on iPhone's Safari. Instead it has to be something you hack together with Javascript. Do the same techniques work for Android's brows开发者_如何学Goer?

Ideas? Thoughts? Thanks.

In general the way this works is by overriding JavaScript touch handlers to prevent the default scrolling mechanism in the webpage. Then inside the touch handler you manually calculate touch physics and position the content in JavaScript.

• Since you asked about Gmail's implementation it's worth noting that the Gmail team blogged about their implementation here: http://code.google.com/mobile/articles/webapp_fixed_ui.html
• iScroll which has been mentioned by other posters is probably the best known open source implementation: http://cubiq.org/iscroll
• Apple's own implementation of this is known as PastryKit but it isn't well documented and not open source: http://daringfireball.net/2009/12/pastrykit

Update: I just reread the question and noticed you were asking about Android (doh!). Looks like Android 2.2 added support for CSS fixed: http://kentbrewster.com/android-scroller/

I'm not super familiar with iOS web app development, but iScroll looks promising.

This is just a simple CSS style:

.className{
position:fixed;
}

You are right in that position:fixed; doesn't work in Mobile Safari but I believe it does in Android.

Here is that script you were talking about to make it work in mobile Safari:

http://cubiq.org/scrolling-div-on-iphone-ipod-touch