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:
Open tasks:
* 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!
Yours,
Stefan