Fixed positioning on iPhone/Android/Mobile

Hey guys,

Anyone had experience with fixed positioning on mobile devices? I read everywhere that devices do not support it, but there are hacky implementations like iscroll

Just wondering if it’s possible to mimic the position:fixed; style of this on an iphone: http://tf.dtbaker.com.au/template/jump-slide/

Cheers!
Dave

ah! helps if I search for the right words

window.onscroll = function() {
  document.getElementById('fixedDiv').style.top =
     (window.pageYOffset + window.innerHeight - 25) + 'px';
};

now to get similar code running only when viewed from a mobile

I did some research on this a while back and what I came up with, at least for iOS, is that it was impossible.

dtbaker said
ah! helps if I search for the right words

window.onscroll = function() {
  document.getElementById('fixedDiv').style.top =
     (window.pageYOffset + window.innerHeight - 25) + 'px';
};

now to get similar code running only when viewed from a mobile

the css, first lines is how you’d call the stylesheets with

<!--Target iPad-->
<link href="ipad.css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" type="text/css" />
<!--Target iPhone 3GS> -->
<link href="iphone.css" rel="stylesheet" media="only screen and  (max-device-width: 480px)" type="text/css" />
<!--Target iPhone 4-->
<link href="retnia.css" rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px)" type="text/css" />

header{
position: absolute;
height: 75px;
width: 100%;
  -webkit-transition-property: postion;
  -webkit-transition-duration: 100ms ;
  -webkit-transition-timing-function: ease-in-out;
}

the jquery

if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod')
{
$(window).scroll(function() {
    $('header').css('top', $(this).scrollTop());
});

};

enjoy

EDIT :this is only tested on iphone/ipad I dont have an android to test it on

Two fingers

Yes! I needed that, too. This seems a big hackash though. I’m going to play with it.

ThemeBlvd said
Yes! I needed that, too. This seems a big hackash though. I’m going to play with it.

yeah its a lot hackish and the transition duration can be made slower so itlll move smoother but if they scroll really fast it takes for ever to catch up