Reputation: 30158
I am programming a mobile site and I want an element to be fixed at a certain position on 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.
Upvotes: 0
Views: 672
Reputation: 1777
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
Upvotes: 1
Reputation: 39836
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
Upvotes: 2