posicionamiento fijo en Mobile Safari

Question

¿Es posible colocar un elemento fijo con relación a la ventana gráfica en Mobile Safari? Como muchos han señalado, position: fixed no funciona, pero Gmail acaba de salir con una solución que casi es lo que quiero -. Ver la barra de menú flotante en la vista de mensajes

Cómo eventos de desplazamiento en tiempo real en JavaScript también sería una solución razonable.

Answer 1

iOS 5 tiene apoyo a la posición:. fijo

Answer 2

Esta div posición fija se puede lograr en tan sólo 2 líneas de código que se mueve el div en el desplazamiento hacia la parte inferior de la página.

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

Answer 3

de Google a este problema. Es, básicamente, tiene que desplazarse contentarse uso de JavaScript. Sencha Touch también proporciona una biblioteca para conseguir este comportamiento en una casa de buen calidad.

Answer 4

que trabajó 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 bar)

A pesar de que la barra se mueve solamente al final del rollo ...

Answer 5

Esto le puede interesar. Es la página de soporte de Apple Dev.
http://developer.apple.com/library/ios/#technotes/ TN2010 / tn2262 /
Lea el punto " 4. Modificar código que se basa en CSS posicionamiento fijo " y se dará cuenta de que hay muy buenas razones por qué Apple tomó la decisión consciente para manejar posición fija como estática.

Answer 6

Creo Gmail acaba de seguimiento de la posición de desplazamiento en un temporizador y coloca un div en consecuencia.

La mejor solución que he visto es en doctyper .

Una solución más simple jQuery que se mueve un elemento onscroll: vincular

Answer 7

Se podría tratar de usar táctil de desplazamiento, un plugin de jQuery que imita el desplazamiento con elementos fijos en Safari móvil: https : //github.com/neave/touch-scroll

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

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

Answer 8

Esta es la forma en que lo hice. Tengo un bloque de navegación que se encuentra por debajo de la cabecera, una vez que se desplaza la página hacia abajo que 'pega' a la parte superior de la ventana. Si se desplaza de nuevo a la parte superior, de navegación se remonta en su lugar Yo uso la posición: fijo en el CSS para plataformas móviles y no IOS5. Otras versiones móviles tienen que 'lag' hasta que la pantalla deja de moverse antes de que sea establecido.

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

Answer 9

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

También asegurarse height=device-height no está presente en esta etiqueta meta ayuda a evitar que el relleno de pie de página adicional que normalmente no existiría en la página. La altura de la barra de menú se suma a la altura de la ventana gráfica causando un fondo fijo para convertirse desplazable.

Answer 10

Aquí puede ver lo que (móvil) de los navegadores soportan CSS posición fija + existe versión.

http://caniuse.com/css-fixed

Answer 11

Nuestra aplicación web requiere una cabecera fija. Tenemos la suerte de que sólo tenemos que soportar los navegadores más recientes, 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 se produce sólo en IOS. Tiene más sentido a la esperanza de que Apple podría solucionar este problema, sobre todo 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 para cambiar entre "position: fixed" y "position: absolute", dependiendo de si el usuario se ha disparado. Esto reemplaza nuestra "flotante" de cabecera con un comportamiento predecible, lo cual es importante para su uso. Cuando se hace zoom, el comportamiento no es lo que queremos, pero el usuario puede trabajar fácilmente alrededor de esta 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";
    });
}