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:

/

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 acmodating for all mobile screen sizes since I'd be just setting the div's top to 0 onScroll.

Thanks!

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./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 acmodating for all mobile screen sizes since I'd be just setting the div's top to 0 onScroll.

Thanks!

• javascript
• html
• css
• mobile-website

• Also keep in mind that Mobile Safari on iOS 5 supports position: fixed. – Alessandro Vendruscolo Commented Nov 23, 2011 at 15:08
• aha Jin, fixed positioning is working fine now – Sam Saffron Commented Aug 16, 2012 at 22:31

3 Answers 3

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 plexity 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.

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

Following on from the link that Sam Saffron posted, it seems that a new version of iScroll (version 4) has resolved some of the problems Sam listed.

iScroll-4

In addition to all previous iScroll features, version 4 introduces:

• Pinch / Zoom
• Pull up/down to refresh
• Improved speed and momentum
• Snap to element
• Customizable scrollbars

I have only looked at the demos on their site, so I can't vouch for it, but it looks good!