How to use fixed positioning on iPhone (Safari Mobile) with javascript

When creating websites for Safari Mobile (iPhone, iPod touch etc) you will probably notice that fixed css positioning does not work as it is supposed to:

position: fixed;

Quite irritating, but it has to do with the way iPhone renders the website, when you scroll on a website, you are actually just panning around on a big static webpage.

If you want to create a fixed element, be it an image, div, text or whatever, on your website, you can use this javascript code as a workaround:

window.onscroll = function()  
    document.getElementById('elementID') = (window.pageYOffset +      window.innerHeight - elementHeight) + 'px'; 
comments powered by Disqus