2821 posts
  • Australia
  • Community Moderator
  • Elite Author
  • Author had a Free File of the Month
  • Most Wanted Bounty Winner
  • Author had a File in an Envato Bundle
  • Has been a member for 5-6 years
  • Contributed a Blog Post
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
+10 more
dtbaker Volunteer 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

2821 posts
  • Australia
  • Community Moderator
  • Elite Author
  • Author had a Free File of the Month
  • Most Wanted Bounty Winner
  • Author had a File in an Envato Bundle
  • Has been a member for 5-6 years
  • Contributed a Blog Post
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
+10 more
dtbaker Volunteer 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
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
  • Has been a member for 3-4 years
  • Bought between 10 and 49 items
  • Exclusive Author
  • United States
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.

3118 posts
  • Sold between 5 000 and 10 000 dollars
  • United States
  • Bought between 10 and 49 items
  • Has been a member for 3-4 years
  • Exclusive Author
chrisakelley 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

2509 posts Put a Donk On It
  • Exclusive Author
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Attended a Community Meetup
  • Referred between 100 and 199 users
  • Contributed a Tutorial to a Tuts+ Site
+5 more
ThemeProvince says

Two fingers :)

1028 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Author had a File in an Envato Bundle
  • Bought between 50 and 99 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 500 and 999 users
+1 more
ThemeBlvd says

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

3118 posts
  • Sold between 5 000 and 10 000 dollars
  • United States
  • Bought between 10 and 49 items
  • Has been a member for 3-4 years
  • Exclusive Author
chrisakelley 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