Quick jQuery hack to fix position:fixed toolbars in iPhone/iPad/iPod Touch

This is just a quick fix if your postion:fixed elements end up in weird places when your site is viewed on the iPhone, iPad, or iPod Touch.

Say you have a div with an id of “#footer” that you want to stay at the bottom of the page. If you set it’s position to “fixed” and set the bottom to “0px”. When viewed on an iPad, iPhone or iPod Touch, the footer may end up in the middle of your content if you have a long page.


//stick the footer at the bottom of the page if we're on an iPad/iPhone due to viewport/page bugs in mobile webkit 
if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod') 
{ 
     $("#footer").css("position", "static"); 
};