Cómo resolver la posición: solucionado para una barra de herramientas inferior en iOS (iPhone/iPad)

Question

Tengo una barra que se fija en la parte inferior de cada página de mi sitio web utilizando la posición: fija. El problema es que en dispositivos como iPhone o iPad no se respeta esta propiedad.

He intentado utilizar javascript para DETEC la altura de la pantalla, la posición de desplazamiento, y esto funciona a la perfección en el IPAD:

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

Como se puede ver que estoy usando jQuery. El problema es que este código no funciona en el iPhone porque la altura de la ventana no incluye la barra de ubicación (y también la barra de depuración, si está presente), por lo que la barra va al lugar correcto al principio, pero a medida que se desplaza obtiene fijado sobre la posición correcta (la cantidad de píxeles utilizados por la barra de ubicación de Mobile Safari).

¿Hay alguna forma de obtener esta información y corregir esta barra de herramientas?

Ten en cuenta que este no es un sitio web hecho para iPhone, así que no puedo usar trucos como iScroll en absoluto.

Answer 1

Sólo puedo señalar en algunas direcciones:

• 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

Gracias Google, no yo:

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

Bastante simple, en realidad.

Answer 3

Acabo de hacer algo como esto, pegando la navegación al TOP de la ventana. El navegador comienza debajo del encabezado y luego se pega si pasa el cursor. iOS5 admite posicionamiento fijo. El elemento se ajustará a la posición DESPUÉS de, pero funciona bien. '#sticky-anchor' es un div envoltorio alrededor de mi navegación.

No recuerdo dónde encontré todo esto, obtuve pequeñas piezas de muchos sitios. Puede ajustarlo para que se ajuste a sus necesidades.

$(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 es la solución más fácil a su problema. Al contrario de lo que crees, también funciona para Android y la ópera. La nueva versión está funcionando de manera excelente.

http://cubiq.org/iscroll-4

Answer 5

Este trozo de código jQuery trabajó para mí:

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

de lo contrario el css para #footer_menu fue:

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

Creo que ajustar la altura ayudó con la representación adecuada y en un navegador de escritorio, quería que este menú se fijara en la parte inferior de la ventana del navegador.

Answer 6

Lo arreglé en mi sitio y respondí esto en Stack Overflow. Desde entonces, recibí muchísimas gracias de parte de las personas que lo implementaron. Lo siento, no tengo tiempo para un resumen.

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

Answer 7

Desde iOS 8.4, puede utilizar position: sticky; respectivamente position: -webkit-sticky; para solucionar este problema.