How to resolve position:fixed for a bottom toolbar on iOS (iPhone/iPad)

javascript iphone ios toolbar fixed
Wes Souza picture Wes Souza · Mar 23, 2011 · Viewed 43.1k times · Source

I have a bar that is fixed to the bottom of every page on my website by using position:fixed. The problem is that on devices like iPhone or iPad this property is not respected.

I tried to use javascript to detec the screen height, scroll position, and this works perfectly on the iPad:

$( window ).scroll( function ( ) { $( "#bar" ).css( "top", ( $( window ).height() + $( document ).scrollTop() - 90 ) +"px" );  } );

As you can see I'm using jQuery. The problem is that this code does not quite work on the iPhone because the window's height does not include the location bar (and also the debug bar if present), so the bar goes on the right place at first, but as you scroll it gets fixed above the right position (the amount of pixels used by Mobile Safari's location bar).

Is there a way to get this information and properly fix this toolbar?

Have in mind this is not a website made for iPhone, so I can't use tricks like iScroll at all.

Answer

kraftwer1 picture kraftwer1 · Mar 31, 2016

Since iOS 8.4, you can use position: sticky; respectively position: -webkit-sticky; to fix this.

Related questions

How do I correctly detect orientation change using Phonegap on iOS?

I found this orientation test code below looking for JQTouch reference material. This works correctly in the iOS simulator on mobile Safari but doesn’t get handled correctly in Phonegap. My project is running into the same issue that is …

Read More
Programmatically selecting text in an input field on iOS devices (mobile Safari)

How do you programmatically select the text of an input field on iOS devices, e.g. iPhone, iPad running mobile Safari? Normally it is sufficient to call the .select() function on the <input ... /> element, but this does not …

Read More
how to intercept Button click inside UIWebview on IOS?

I have a HTML form that has certain fields which i am opening inside a UIWebview. On click of a particular button i want to do a in app action. The approach i'm using now is on click of the …

Read More