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

Thank Google, not me:

http://code.google.com/mobile/articles/webapp_fixed_ui.html

Pretty simple, actually.

Answer 2

Try hiding/displaying the bottom fixed nav on iPhone based on the window.innerHeight. Whenever the toolbars are displaying, usually when you scroll up, you can display the bottom nav and hide it when scrolling down, when the toolbars hide.

You can use a code like this:

    var windowHeight = {
  small: window.innerHeight,
  middle: window.innerHeight,
  big: window.innerHeight
}
window.addEventListener('resize', function(){
  var currentHeight = window.innerHeight;
  if (currentHeight < windowHeight.small) {
    windowHeight.small = currentHeight;
  }

  if (currentHeight > windowHeight.big) {
    windowHeight.big = currentHeight;
  }

  console.log('windowHeight.small', windowHeight.small, 'windowHeight.middle', windowHeight.middle, 'windowHeight.big', windowHeight.big, 'currentHeight', currentHeight);

  if (currentHeight === windowHeight.big) {
    transform(stickyNav, 'translate3d(0,120%,0)');
    console.log('Hide bottom nav on big screen!');
  } else if (currentHeight === windowHeight.middle) {
    transform(stickyNav, 'translate3d(0,0,0)');
    console.log('Show bottom nav on middle screen!');
  } else {
    transform(stickyNav, 'translate3d(0,-100%,0)');
    console.log('Display bottom nav high up on smaller screen!');
  }
})

The transform(stickyNav, 'translate3d(x,x,x)') function is a simple function taking in the bottom nav and then applying a transform in order to hide/display an item placed at the bottom.