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

Question

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 respect

Answer 1

I can only point you in some directions:

• fixed-positioning-on-mobile-safari
• css-position-fixed-solution
• the-mobile-webkit-css-fixed-position-problem
• SO: weird-webkit-issue-with-position-fixed

Answer 2

I fixed this on my site, and answered this on Stack Overflow. Since then I've gotten a ton of thanks from people who have implemented it. Sorry I don't have time for a summary.

https://stackoverflow.com/a/10030251/1118070

Answer 3

I just did something like this, sticking the navigation to the TOP of the window. The nav starts below the header then sticks if you scroll passed it. iOS5 does support fixed positioning. The item will snap to position AFTER scroll ends, but still works well. '#sticky-anchor' is a wrapper div around my navigation.

Don't recall where I found all this, got little pieces from many sites. You can adjust it to fit your needs.

$(window).scroll(function(event){

// sticky nav css NON mobile way
   sticky_relocate();

   var st = $(this).scrollTop();

// sticky nav iPhone android mobile way
// iOS 4 and below

   if (navigator.userAgent.match(/OS 5(_\d)+ like Mac OS X/i)) {
        //do nothing uses sticky_relocate above
   } else if ( navigator.userAgent.match(/(iPod|iPhone|iPad)/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) ) {

        var window_top = $(window).scrollTop();
        var div_top = $('#sticky-anchor').offset().top;

        if (window_top > div_top) {
            $('#sticky').css({'top' : st , 'position' : 'absolute' });
        } else {
            $('#sticky').css({'top' : 'auto' });
        }
    };
};

Answer 4

iScroll probaply is the easiest solution to your problem. Contrary to your believe it also works for android and opera. The new version of it is performing superb.

http://cubiq.org/iscroll-4

Answer 5

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

Answer 6

This bit of jquery code worked for me:

if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod'){
    $("#footer_menu").css("position", "fixed").css("top", $('window').height());
};

otherwise the css for #footer_menu was:

position:fixed;
bottom:0;
width:100%;
padding:5px 0;
text-align:center;
height:44px;

I think setting the height helped with rendering properly and on a desktop browser I wanted this menu fixed to the bottom of the browser window.