Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 964
Wes Souza Avatar asked Mar 23 '11 18:03

Wes Souza


People also ask

Does position fixed work on IOS?

CSS position:fixed is Fully Supported on Safari 15, which means that any user who'd be accessing your page through Safari 15 can see it perfectly.

How do you make fixed content go above IOS keyboard?

To force it work the same way as Mobile Chrome, you have to use position: absolute, height: 100% for the whole page or a container for your pseudo-fixed elements, intercept scroll, touchend, focus, and blur events. The trick is to put the tapped input control to the bottom of screen before it activates focus.


1 Answers

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

like image 59
kraftwer1 Avatar answered Oct 20 '22 05:10

kraftwer1