Posicionamiento fijo en Safari Móvil

Este div de posición fija se puede lograr en solo 2 líneas de código que mueve el div en scroll hasta la parte inferior de la página.

window.onscroll = function() {
  document.getElementById('fixedDiv').style.top =
     (window.pageYOffset + window.innerHeight - 25) + 'px';
};

Ver La solución de Google a este problema. Básicamente tienes que desplazar el contenido tú mismo usando JavaScript. Sencha Touch también proporciona una biblioteca para obtener este comportamiento en una mansión muy performante.

Funcionó para mí:

function changeFooterPosition() {   
  $('.footer-menu').css('top', window.innerHeight + window.scrollY - 44 + "px");
}

$(document).bind('scroll', function() {
  changeFooterPosition();
});

(44 es la altura de mi barra)

Aunque la barra solo se mueve al final del desplazamiento...

Esto puede interesarle. Es la página de soporte de Apple Dev.
http://developer.apple.com/library/ios/#technotes/tn2010/tn2262/

Lea el punto " 4. Modifique el código que se basa en el posicionamiento fijo CSS" y descubrirá que hay una muy buena razón por la que Apple tomó la decisión consciente de manejar la posición fija como estática.

Creo que gmail solo rastrea la posición de desplazamiento en un temporizador y reposiciona un div en consecuencia.

La mejor solución que he visto está en doctyper.

Una solución jQuery más simple que mueve un elementorollcroll: link

Puedes intentar usar touch-scroll, un plugin de jQuery que imita el desplazamiento con elementos fijos en mobile Safari: https://github.com/neave/touch-scroll

Vea un ejemplo con su dispositivo iOS en http://neave.github.com/touch-scroll /

O una alternativa es iScroll: http://cubiq.org/iscroll

Así es como lo hice. Tengo un bloque de navegación que está debajo del encabezado una vez que desplazas la página hacia abajo, 'se pega' a la parte superior de la ventana. Si te desplazas hacia arriba, nav vuelve a su lugar Uso position: fixed en CSS para plataformas no móviles e iOS5. Otras versiones móviles tienen que ' lag ' hasta que la pantalla deja de desplazarse antes de que se establece.

// css
#sticky.stick {
    width:100%;
    height:50px;
    position: fixed;
    top: 0;
    z-index: 1;
}

// jquery 
//sticky nav
    function sticky_relocate() {
      var window_top = $(window).scrollTop();
      var div_top = $('#sticky-anchor').offset().top;

      if (window_top > div_top)
        $('#sticky').addClass('stick');
      else
        $('#sticky').removeClass('stick');
     }

$(window).scroll(function(event){

    // sticky nav css NON mobile way
       sticky_relocate();

       var st = $(this).scrollTop();

    // sticky nav iPhone android mobile way iOS<5

       if (navigator.userAgent.match(/OS 5(_\d)+ like Mac OS X/i)) {
            //do nothing uses sticky_relocate() css
       } 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' });
            }
        };

<meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 

También asegurarse de que height=device-height no esté presente en esta meta etiqueta ayuda a evitar el relleno adicional del pie de página que normalmente no existiría en la página. La altura de la barra de menú se suma a la altura de la ventana, lo que hace que se pueda desplazar un fondo fijo.

Aquí puede ver qué navegadores (móviles) soportan la posición css fija + allí versión.

Http://caniuse.com/css-fixed

Nuestra aplicación web requiere un encabezado fijo. Tenemos la suerte de que solo tenemos que soportar los últimos navegadores, pero el comportamiento de Safari en esta área nos causó un problema real.

La mejor solución, como otros han señalado, es escribir nuestro propio código de desplazamiento. Sin embargo, no podemos justificar ese esfuerzo para solucionar un problema que ocurre solo en iOS. Tiene más sentido esperar que Apple pueda solucionar este problema, especialmente porque, como sugiere QuirksMode, Apple ahora está solo en su interpretación de "position:fixed".

Http://www.quirksmode.org/blog/archives/2013/12/position_fixed_1.html

Lo que funcionó para nosotros es alternar entre "position:fixed" y "position:absolute" dependiendo de si el usuario ha ampliado. Esto reemplaza nuestro encabezado "flotante" con un comportamiento predecible, que es importante para la usabilidad. Cuando se hace zoom, el comportamiento no es lo que queremos, pero el usuario puede solucionar esto fácilmente invirtiendo el zoom.

// On iOS, "position: fixed;" is not supported when zoomed, so toggle "position: absolute;".
header = document.createElement( "HEADER" );
document.body.appendChild( header );
if( navigator.userAgent.match( /iPad/i ) || navigator.userAgent.match( /iPhone/i )) {
    addEventListener( document.body, function( event ) {
        var zoomLevel = (( Math.abs( window.orientation ) === 90 ) ? screen.height : screen.width ) / window.innerWidth;
        header.style.position = ( zoomLevel > 1 ) ? "absolute" : "fixed";
    });
}