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

toolbar fixed

Question

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

Intenté usar javascript para detectar la altura de la pantalla, la posición de desplazamiento, y esto funciona perfectamente en el iPad:

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

Como puedes ver estoy usando jQuery. El problema es que este código no funciona del todo 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 se coloca en el lugar correcto al principio, pero a medida que se desplaza se pone fija por encima de la posición correcta (la cantidad de píxeles utilizados por la barra de ubicación de Mobile Safari).

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

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

Answer 1

Acabo de hacer algo como esto, pegando la navegación al ARRIBA de la ventana. La navegación comienza debajo del encabezado y luego se atasca si lo desplazas. iOS5 soporta posicionamiento fijo. El elemento se ajustará a la posición DESPUÉS de que finalice el desplazamiento, pero aún así 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. Puedes ajustarlo para que se ajuste a tus 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 2

Arreglé esto en mi sitio y respondí esto en . Desde entonces, he recibido muchísimas gracias de las personas que lo han implementado. Lo siento, no tengo tiempo para un resumen.

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

Answer 3

Desde iOS 8.4, puedes usar position: sticky; respectivamente position: -webkit-sticky; para arreglar esto.

Answer 4

Este bit de código jquery funcionó 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 era:

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

Creo que configurar la altura ayudó a representar correctamente y en un navegador de escritorio quería que este menú se fijara en la parte inferior de la ventana del navegador.

Answer 5

Gracias a Google, no a mí:

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

Bastante simple, en realidad.

Answer 6

Solo puedo apuntarte 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 7

iScroll probablemente sea la solución más fácil para su problema. Contrariamente a su creencia, también funciona para Android y Opera. La nueva versión de ella está funcionando excelente.

http://cubiq.org/iscroll-4