Mobile Web- CSS position- fixed;

Thanks to Aarron Walter's talk at FOWD last year I've started a side project. And it's great because I get to test and experiment with new techniques, I get to learn new skills and I get to do a bit of independent thinking. I'm loving it because I'm seeing an idea from start to finish! Right now I'm designing and prototyping; there is paper everywhere; it's fantastic!

I'm sure that I'll expand more regarding this project in a later blog, however right now all that you need to know is that I'm working on a small web application (*surprise*).

At the moment I'm thinking a lot about the user interface and the user experience while a user is engaging with the site. One of the things I'm trying to do is create an interface that is familiar and recognisable, following Nielson's heuristic guideline of 'recognition rather than recall' (see useit.com for more info). One of the design elements that is used heavily featured mobile interfaces is a banner going across the top and bottom of the screen. Normally the top banner is used for a logo perhaps with a search icon and the footer is used for action buttons, enabling the user to navigate through the app.

So my initial thought was 'great; that will be really easy to reproduce with CSS'. There is a fantastic property within CSS called 'position'. By giving an element the property position: fixed; top: 0; the element is always visible, staying fixed to the top of the screen even when you scroll up and down the page. So, by applying this to a banner on the page the application's title and search link will always stay visible to the user through out the app.

However it appears that in almost all mobile browsers position: fixed; behaves bizarrely, it gives an awful user experience and rarely fixes the element to the top of the screen. I've found this video by Brad Frost which demonstrates just how bad mobile support for position: fixed really is.

After a lot of hunting around on the internet for a solution to this problem I came across several potential solutions involving JavaScript such as iScroll or the jQuery Mobile UI. I just can't help but feel this is over-complicating the solution a little bit… also I don't want to compromise the speed of my site by downloading another framework.

So, I'm throwing the question out there… does anyone know how to make this work without falling back to JavaScript? Currently I've got the to stage of frustration that I've remodelled without these banners.