5441 posts
  • Author Level 11
  • Moderator
  • Winner
  • 6 Years of Membership
+20 more
dtbaker
Moderator
says

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

5441 posts
  • Author Level 11
  • Moderator
  • Winner
  • 6 Years of Membership
+20 more
dtbaker
Moderator
says

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

19 posts
  • Affiliate Level 1
  • Author Level 3
  • Collector Level 3
  • 5 Years of Membership
+2 more
justinedelson
says

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

3439 posts
  • Author Level 4
  • Collector Level 2
  • Community Superstar
  • United States
+2 more
organicbee
says

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

2627 posts Put a Donk On It
  • Weekly Top Seller
  • Elite Author
  • Exclusive Author
  • Featured Author
+11 more
ThemeProvince
says

Two fingers :)

1037 posts
  • Affiliate Level 6
  • Author Level 10
  • Collector Level 4
  • Top Monthly Author
+8 more
ThemeBlvd
says

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

3439 posts
  • Author Level 4
  • Collector Level 2
  • Community Superstar
  • United States
+2 more
organicbee
says

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

by
by
by
by
by
by