javascript - developer - Posicionamiento fijo en Mobile Safari
safari developer (11)
Aquí puede ver qué navegadores (móviles) admiten la posición css fija + hay versión.
¿Es posible posicionar un elemento fijo relativo a la ventana gráfica en Mobile Safari? Como muchos han notado, la position: fixed no funciona, pero Gmail acaba de sacar una solución que casi es lo que quiero, vea la barra de menú flotante en la vista del mensaje.
Obtener eventos de desplazamiento en tiempo real en JavaScript también sería una solución razonable.
Así es como lo hice. Tengo un bloque de navegación que está debajo del encabezado, una vez que se desplaza por la página, se ''pega'' a la parte superior de la ventana. Si se desplaza hacia atrás, el navegador vuelve a su ubicación. Uso la posición: corregido en CSS para plataformas no móviles e iOS5. Otras versiones móviles tienen ese ''retraso'' hasta que la pantalla deja de desplazarse antes de establecerse.
// 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'' });
}
};
Este div de posición fija se puede lograr en solo 2 líneas de código que mueve el div en desplazamiento hacia la parte inferior de la página.
window.onscroll = function() {
document.getElementById(''fixedDiv'').style.top =
(window.pageYOffset + window.innerHeight - 25) + ''px'';
};
Esto puede interesarte. 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 de CSS " y descubrirá que hay una muy buena razón por la cual Apple tomó la decisión consciente de manejar la posición fija como estática.
Nuestra aplicación web requiere un encabezado fijo. Tenemos la suerte de que solo tenemos que admitir los últimos navegadores, pero el comportamiento de Safari en esta área nos causó un problema real.
La mejor solución, como han señalado otros, 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 dado que, como lo sugiere QuirksMode, Apple ahora está solo en su interpretación de "posición: fija".
http://www.quirksmode.org/blog/archives/2013/12/position_fixed_1.html
Lo que funcionó para nosotros es alternar entre "posición: fija" y "posición: absoluta" dependiendo de si el usuario ha aplicado el zoom. Esto reemplaza nuestro encabezado "flotante" con un comportamiento predecible, que es importante para la usabilidad. Cuando se amplía, el comportamiento no es el que queremos, pero el usuario puede evitarlo 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";
});
}
Podría intentar usar touch-scroll, 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 una alternativa es iScroll: http://cubiq.org/iscroll
Vea la solución de Google a este problema . Básicamente tiene que desplazarse por el contenido usted mismo usando JavaScript. Sencha Touch también proporciona una biblioteca para obtener este comportamiento en una mansión muy eficiente.
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 ...
iOS 5 tiene soporte para posición: fijo .
<meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
También asegúrese de que height=device-height no esté presente en esta metaetiqueta ayuda a evitar 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, lo que hace que un fondo fijo se vuelva desplazable.