Iphone: Sticky On-screen Header Or Footer In Webkit (html/css)

Is it possible to create a sticky header or footer such that no matter where you scroll the header/footer stays put? I'm looking for a HTML/css/javascript solution for iPhone/webki

Solution 1:

You'd need to do this with JavaScript, as MobileSafari deliberately leaves out support for CSS's position: fixed. You should be able to detect the current viewport and absolutely position an element in the right spot, and update its location when the viewport changes.

Solution 2:

Answering my own question: best resource I've found so far is this one: http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

However, I think I'm going to end up using Titanium from Appcelerator instead of just html/css.

Solution 3:

There is also another attempt to emulate position: fixed :

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

But it's hacky, and not very performant too.

You are right, Titanium or phonegap do the job well...