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

Traté de usar javascript para detección de la altura de la pantalla, la posición de desplazamiento, y este 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 en el iPhone, ya que la ventana de la altura no incluye la barra de ubicación (y también la depuración de la barra si está presente), por lo que la barra va en el lugar correcto en principio, pero a medida que se desplaza de arreglarlo por encima de la posición correcta (la cantidad de píxeles utilizados por el Móvil de Safari en la barra de dirección).

Hay una manera de obtener esta información y fijar adecuadamente esta barra de herramientas?

Tener en cuenta que esto no es un sitio web hecho para el iPhone, así que no puedo usar trucos como iScroll a todos.

  • +1 para iPad compatible con el código. Voy a estar viendo aquí en busca de respuestas 🙂
  • Parece que iOS 5 resolver estos problemas por la hora de interpretar correctamente la posición de:elementos fijos.
  • Tal vez cuando salga de la Beta voy a echar un vistazo.
InformationsquelleAutor Wes Souza | 2011-03-23

8 Comentarios

  1. 5

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

  2. 1

    Sólo puedo el punto de que en algunas direcciones:

    • Interesante la forma en que dos de los links me dicen que acaba de abandonar, me pregunto si esto es factible en todos.
    • Si usted encuentra una solución, por favor háganoslo saber, que puede responder a sus propias preguntas, ASÍ.
    • distill.engineyard.com/archive#home. Este sitio es persistente cabecera es la menos buggy que he visto. Tal vez hay algo que están haciendo eso se soluciona el problema?
  3. 1

    Acabo de hacer algo como esto, pegando la navegación a la SUPERIOR de la ventana.
    La navegación comienza debajo de la cabecera, a continuación, pega si se desplaza pasado.
    iOS5 tiene soporte fijo de posicionamiento.
    El artículo se ajustará a la posición DESPUÉS de de desplazamiento termina, pero todavía funciona bien.
    '#sticky-anchor' es un contenedor div alrededor de mi navegación.

    No recuerdo donde he encontrado todo esto, tengo pequeños trozos de muchos sitios.
    Usted puede ajustar para adaptarse 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' });
            }
        };
    };
  4. 0

    Este trozo de código jquery trabajado 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 ajuste de la altura de la ayudó con la representación correctamente y en un navegador de escritorio quería que este menú fijo a la parte inferior de la ventana del navegador.

  5. 0

    Intentar ocultar/mostrar el fondo fijo de navegación en el iPhone basada en la ventana.innerHeight. Cuando las barras de herramientas se muestran, por lo general, cuando se desplaza hacia arriba, puede mostrar la parte inferior de navegación y ocultarla cuando se desplaza hacia abajo, cuando las barras de herramientas ocultar.

    Puede utilizar un código como este:

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

    La transformación(stickyNav, ‘translate3d(x,x,x)’) la función es una función simple de tomar en la parte inferior de navegación y, a continuación, aplicar una transformación en el fin de ocultar/mostrar un elemento colocado en la parte inferior.

  6. -2

    Gracias a Google, no me:

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

    Bastante simple, en realidad.

    • Como he mencionado desde el principio: «Tenemos en mente, este no es un sitio web hecho para el iPhone, así que no puedo usar trucos como iScroll a todos.» Esto es exactamente ese truco.
    • El código de Google es un buen punto de partida. Sin embargo, creo que es buggy (creo que la línea que dice this.element = this; debe ser this.element = element;) y es incompleta (varias funciones de la tecla izquierda «como ejercicio para el lector»). Obtener los detalles de impulso, de rebote, etc EXACTAMENTE lo que son REALMENTE importantes, y eso es lo que ha dejado fuera. Me encantaría ver una implementación de la falta métodos!
    • El enlace que aparece en esta respuesta, ahora está muerto.

Dejar respuesta

Please enter your comment!
Please enter your name here