JQM's fixed footers lack much of the look and feel of native footers (at least in my opinion). Fixed elements on iOS jitter when scrolling (albeit this is not JQMs fault), sometimes jump when changing pages and on iOS users expect that the content has that rubber band scrolling while leaving the footers fixed.
With scrollfix.js and a html template at hand I thought if it might be possible to create a better user experience for JQM apps. I'd like to ask for your critical feedback (you know once you're fighting a problem you often miss the obvious solutions).
Here's a link to my demo that shows really fixed footers, rubber band scrolling for the content:
* Make it work in non-standalone mode (currently the absolute positioning won't adjust when the url bar's visibility toggles).
* Check non-webkit browser compatibility
Try it on iOS and put an icon on your homescreen (otherwise you'll just get a silly message to do so...). It also works on a Nexus 7 (Android 4.1 + Chrome) and thus probably other android devices too.
Here's what the demo does:
* Header, footer and content are positioned absolute. The content is scrollable. This makes up for the basic layout. The header and footer are created and enhanced for the first page, then detached from the page and added to the body (and thus visible on all pages).
* The content has -webkit-overflow-scrolling:touch which results with Scrollfix.js in nice native scrolling.
* The header and footer ignore touchmove events to prevent rubber banding in both of them.
* I couldn't make the slide transition work nicely. The header and footer would flicker and move by a few pixel. Thus I created my own slide transition that appears to work nicer (for that demo).
All in all quite a hack, but it works for that demo (and hopefully my app) and I hope this allows me to convice some people at work that webapps can be really fine for some use cases.
I'd love to hear your feedback. Bug fixes, improvements or alternative approaches are really welcome!
Works beautifully on my iPhone 4s and is exactly what I wanted. I actually posted a question today about just such an effect.
Thanks for this.
This works fine on my iPhone 4S with IOS 5.1.1
Does not work as well on my iPad 1 IOS 5.1.1
While the top/bottom scrolling is fixed with your code there is an odd left/right scrolling introduced now. What I mean is that this odd scrolling is not there in a vanilla IQM webapp although the annoying up/down effect is there.
With your code the annoying up/down scrolling is gone BUT on the iPad 1 it introduces the odd left/right scrolling.
See the attached image for what I mean:
The black area is the annoying part where the page can be dragged first left and then down. This is from your demo page running on my iphone 1 from a desktop icon..
The behaviour of your iPad 1 sounds strange. I've almost no idea what could cause that. So I did exactly what a good dev never would (admit to) do: I've created a new version with a quite few changes all to once...
This solution is fantastic and deserves more attention. After not being to find a perfect solution to this problem for 18 months, it seems there is finally a FULL solution. Thankyou! iOS web apps can now take full advantage of fixed navigation!
Tried your solution and it seems to work perfect for Android 4.1 (Galaxy Nexus) and iOS 5.1 (iPad 3), so thank you for that! However on devices with Android 2.3(.3) the content area won't scroll, whatever we try. This happens in the example used above, as well as our own version (without jquery mobile - as we only want support for Android 2.3> and iOS 5.1>).
We tried a lot go get it going, but are kind of stuck. Any suggestions what the problem (or even better - fix) might be? Thanks a lot!