3184 posts
  • Helps us moderate the forums
  • Has been part of the Envato Community for over 5 years
  • Helped several times protecting Envato Market against copyright violations
  • Won a competition
+15 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

3184 posts
  • Helps us moderate the forums
  • Has been part of the Envato Community for over 5 years
  • Helped several times protecting Envato Market against copyright violations
  • Won a competition
+15 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
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Has been part of the Envato Community for over 4 years
+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.

3341 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+1 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

2580 posts Put a Donk On It
  • Has referred 200+ members
  • Has sold $250,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+10 more
ThemeProvince says

Two fingers :)

1028 posts
  • Has referred 500+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+6 more
ThemeBlvd says

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

3341 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+1 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