Fixed positioning for mobile browsers.

Question

On the mobile site I'm building, I need the top header to stay fixed positioned.

I am aware of the fixed position solution for Mobile Safari as seen here:

http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

I tried it and it works well. However, I was wondering if there's a single solution that works for all major smartphone's mobile browsers. Note: I don't need the footer to stay fixed, just the top header. So this should make it easier accommodating for all mobile screen sizes since I'd be just setting the div's top to 0 onScroll.

Thanks!

Answer 1

You may find this article useful:

• HTML and CSS for Mobiles

Answer 2

I think iScroll is the most actively developed solution, it does support Android

But there are a few things to watch out for:

1. By enabling this hack you are disabling features people are used to like zoom.
2. It is adding a lot of complexity to your solution.

For these reasons JQtouch decided not to use it:

Not a problem. It is not currently supported in jQTouch. Not sure how familiar you are, but the main problem here is that mobile Safari does not support position: fixed. A few people have worked on implementations of this, most notably [http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5 Cubiq] and [http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/ Doctyper]. Both feel wrong to me, hence why I don't do by default, but you're free to try to make an extension which supports it-

Personally when dealing with stuff that needs fixed positioning on an iPhone I prefer to go with static positioning and just autoscroll to the bottom/top when changing the content dynamically.