3317 posts
  • Provided great contribution to our forums
  • Nominated Community Superstar of the month
  • Helps us moderate the forums
  • Has been part of the Envato Community for over 5 years
+18 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

3317 posts
  • Provided great contribution to our forums
  • Nominated Community Superstar of the month
  • Helps us moderate the forums
  • Has been part of the Envato Community for over 5 years
+18 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.

3437 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

2588 posts Put a Donk On It
  • Elite Author: Sold more than $75,000 on Envato Market
  • Sells items exclusively on Envato Market
  • Made it to the Authors' Hall of Fame
  • Has sold $250,000+ on Envato Market
+10 more
ThemeProvince says

Two fingers :)

1029 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. :-)

3437 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

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by