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 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' });
        }
    };
};