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

Important update

As of iOS 5, fixed positioning works fine on mobile. Similarly latest androids support it.

---

Old answer

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 Cubiq and 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.

Answer 2

I was facing the same problem for more than two weeks . And this solution worked for me. Just include

-webkit-backface-visibility: hidden;

in the css of the element along with position:fixed .

It will work fine