$(window).scroll() Method of keeping a bottom bar on a website doesn't work on iPhone

So, I am working on a website that is suppos开发者_开发问答ed to be mobile friendly. This version of the site is designed to sort of look more like an iPhone app and as such there is a bar at the bottom of the screen http://snpr.cm/kaU9DM.jpg and it needs to stay stationary. I've done things like this before and in a nutshell use the $(window).scroll() function to reposition the bar whenever the user scrolls. Using mobile safari this function only fires once the user is done scrolling, not great. I have tried using the touchstart, touchmove & touchend bindings but they didn't work well either.

Any suggestions?

This is a know issue. You either have to accept that the toolbar will be delayed. Many sites have given such toolbars a more "floaty"/unattached feel and look to match this behaviour.

Or you could set the dimensions of the page tithe dimensions of the screen using meta tags. Then put you content in a scrolling div with a toolbar below the scrolling div. So that when a user scrolls the page actually stays in place but the div which takes up all the screen except the space for the bottom bar is actually what's scrolling. This seems to be how most people get around this issue. However to be even more difficult you can't just have a div with overflow set to scroll in CSS, you need to use something like iscroll else the users will have to use 2 fingers to scroll (that I if they realise they have to use 2 fingers)

In ios5 setting the CSS position property of an element to fixed now works in the way that makes sense, so if you don't mind leaving iTouch 1st and 2nd gen and iPhone original and iPhone 3G user behind you can use this. Also ios5 allows users to use one finger to scroll elements without any extras.