css / jquery - need persistent footer without using position:fixed

I am programming a mobile site and I want an element to be fixed at a certain position o开发者_如何学Gon the screen and stay there even as the user scrolls down the page. I can't use position:fixed as far as I know because iPhone doesn't support it. How would I accomplish this? I do not want to use jquery mobile.

you might want to make use of jquery mobile, in particular check out the section "persistent footer navigation bar"

http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html

Im ganna start off by saying iOS5 will have support for fixed. but for now, you're ganna have to use javascript to move it. Lets assume ur footer's ID is "myFooter"

window.addEventListener(
  'scroll',
  function() {
    document.getElementById('myFooter').style.top = 
    (window.pageYOffset + window.innerHeight - footerHeight) + 'px';
  },
  false
);

that should move it when you scroll (footerHeight is your footer's height and can also be retrieved with document.getElementById("myFooter").style.height if the style object was used to define the height

If there is something I have not forseen in the above solution, you can always divide the viewport into two sections, the content and footer. Just absolutely position the footer and use the touch events (touchmove,touchend,targetTouches etc) in combination with scrollTo (scrollTo(destination, duration)) on your content area