5408 posts
  • Has sold $750,000+ on Envato Market
  • Helps us moderate the forums
  • Won a competition
  • Has been part of the Envato Community for over 6 years
+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

5408 posts
  • Has sold $750,000+ on Envato Market
  • Helps us moderate the forums
  • Won a competition
  • Has been part of the Envato Community for over 6 years
+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
  • 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.

3439 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Achieved the monthly Community Superstar Award
  • Located in 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
  • Had an item that became a weekly top seller
  • Elite Author: Sold more than $75,000 on Envato Market
  • Sells items exclusively on Envato Market
  • Made it to the Authors' Hall of Fame
+11 more
ThemeProvince
says

Two fingers :)

1035 posts
  • Has referred 500+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Became a Top 20 Author of the Month
+8 more
ThemeBlvd
says

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

3439 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Achieved the monthly Community Superstar Award
  • Located in 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