quiero - posición: fijo no funciona en iPad y iPhone
personalizar centro de control ios 10 (12)
Aunque el atributo CSS {position:fixed;} parece funcionar (en su mayoría) en dispositivos iOS más nuevos, es posible que el dispositivo sea peculiar y se repliegue en {position:relative;} ocasionalmente y sin motivo o razón. Por lo general, borrar el caché ayudará, hasta que algo suceda y el capricho vuelva a suceder.
Específicamente, desde la propia Apple preparando su contenido web para iPad :
Safari en iPad y Safari en iPhone no tienen ventanas de tamaño variable. En Safari para iPhone y iPad, el tamaño de la ventana se establece en el tamaño de la pantalla (menos los controles de la interfaz de usuario de Safari) y el usuario no puede cambiarlo. Para moverse por una página web, el usuario cambia el nivel de zoom y la posición de la ventana gráfica al hacer doble clic o pellizcar para acercar o alejar, o al tocar y arrastrar para desplazarse por la página. A medida que un usuario cambia el nivel de zoom y la posición de la ventana gráfica, lo hace dentro de un área de contenido visible de tamaño fijo (es decir, la ventana). Esto significa que los elementos de la página web que tienen su posición "fija" en la ventana gráfica pueden terminar fuera del área de contenido visible, fuera de la pantalla.
Lo que es irónico, los dispositivos Android no parecen tener este problema. También es completamente posible usar {position:absolute;} cuando se hace referencia a la etiqueta body y no tiene ningún problema.
Encontré la causa raíz de esta peculiaridad; que es el evento de desplazamiento que no se juega bien cuando se usa junto con la etiqueta HTML o BODY. A veces no le gusta disparar el evento, o tendrá que esperar hasta que el evento de desplazamiento de desplazamiento finalice para recibir el evento. Específicamente, la ventana gráfica se vuelve a dibujar al final de este evento y los elementos fijos se pueden volver a colocar en otro lugar en la ventana gráfica.
Así que esto es lo que hago: (¡ evita usar la ventana gráfica y sigue con el DOM! )
<html>
<style>
.fixed{
position:fixed;
/*you can set your other static attributes here too*/
/*like height and width, margin, etc.*/
}
.scrollableDiv{
position:relative;
overflow-y:scroll;
/*all children will scroll within this like the body normally would.*/
}
.viewportSizedBody{
position:relative;
overflow:hidden;
/*this will prevent the body page itself from scrolling.*/
}
</style>
<body class="viewportSizedBody">
<div id="myFixedContainer" class="fixed">
This part is fixed.
</div>
<div id="myScrollableBody" class="scrollableDiv">
This part is scrollable.
</div>
</body>
<script type="text/javascript" src="{your path to jquery}/jquery-1.7.2.min.js"></script>
<script>
var theViewportHeight=$(window).height();
$(''.viewportSizedBody'').css(''height'',theViewportHeight);
$(''#myScrollableBody'').css(''height'',theViewportHeight);
</script>
</html>
En esencia, esto hará que el CUERPO sea del tamaño de la ventana gráfica y no desplazable. El DIV desplazable anidado en el interior se desplazará como el CUERPO normalmente (menos el efecto de oscilación, por lo que el desplazamiento se detiene al tocar). La DIV fija permanece fija sin interferencia.
Como nota al margen, un alto valor de z-index en el DIV fijo es importante para mantener el DIV desplazable parece estar detrás de él. Normalmente agrego el tamaño de la ventana y los eventos de desplazamiento también para la compatibilidad de resolución de pantalla alternativa y entre navegadores.
Si todo lo demás falla, el código anterior también funcionará con los DIVs fijos y desplazables establecidos en {position:absolute;} .
He estado luchando con el posicionamiento fijo en iPad por un tiempo. Sé que iScroll y no siempre parece funcionar (incluso en su demo). También sé que Sencha tiene una solución para eso, pero no pude Ctrl + F el código fuente para esa solución.
Espero que alguien tenga la solución. El problema es que los elementos de posición fija no se actualizan cuando el usuario sube / baja en un Safari móvil con iOS.
El posicionamiento fijo no funciona en iOS como lo hace en las computadoras.
Imagine que tiene una hoja de papel (la página web) debajo de una lupa (la ventana gráfica), si mueve la lupa y su ojo, verá una parte diferente de la página. Así es como funciona iOS.
Ahora hay una hoja de plástico transparente con una palabra, esta hoja de plástico permanece estacionaria sin importar qué (la posición: elementos fijos). Entonces, cuando mueves la lupa, el elemento fijo parece moverse.
Alternativamente, en lugar de mover la lupa, mueves el papel (la página web), manteniendo la hoja de plástico y la lupa quietas. En este caso, la palabra en la hoja de plástico parecerá estar fija, y el resto del contenido parecerá moverse (porque en realidad lo es). Este es un navegador de escritorio tradicional.
En iOS, la ventana gráfica se mueve, en un navegador tradicional la página web se mueve. En ambos casos, los elementos fijos permanecen quietos en la realidad; aunque en iOS los elementos fijos parecen moverse.
La forma de evitar esto, es seguir los últimos párrafos en este artículo
(Básicamente, deshabilite el desplazamiento por completo, tenga el contenido en un div desplazable por separado (vea el recuadro azul en la parte superior del artículo vinculado), y el elemento fijo colocado en forma absoluta)
"posición: fija" ahora funciona como era de esperar en iOS5.
En mi caso, el desplazamiento mostró la position: fixed elemento position: fixed que originalmente no se mostraba cuando se agregaba al DOM. Así que simplemente activé manualmente el evento de desplazamiento que a su vez desencadenó un redibujado y listo.
window.scrollTo(window.scrollX, window.scrollY);
Evitar en el mismo cuadro usando transform: --- y position: fixed. El elemento permanecerá en su posición: estático si hay alguna transformación.
Terminé usando el nuevo jQuery Mobile v1.1: jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0
Ahora tenemos una nueva escritura sólida que proporciona verdaderas barras de herramientas fijas en muchas plataformas populares y regresa de forma segura al posicionamiento de la barra de herramientas estática en otros navegadores.
La mejor parte de este enfoque es que, a diferencia de las soluciones basadas en JS que imponen la física de desplazamiento antinatural en todas las plataformas, nuestro desplazamiento se siente 100% nativo porque así es . Esto significa que el desplazamiento se siente en todas partes y funciona con el toque, la rueda del mouse y la entrada del usuario del teclado. Como extra, nuestra solución basada en CSS es súper liviana y no afecta la compatibilidad o la accesibilidad.
Tuve este problema en Safari (iOS 10.3.3) - el navegador no estaba redibujando hasta el evento touchend. Los elementos fijos no aparecieron o fueron cortados.
El truco para mí fue agregar transform: translate3d (0,0,0); a mi elemento de posición fija.
.fixed-position-on-mobile {
position: fixed;
transform: translate3d(0,0,0);
}
ahora soporte de Apple que
overflow:hidden;
-webkit-overflow-scrolling:touch;
aquí está mi solución a esto ...
CSS
#bgimg_top {
background: url(images/bg.jpg) no-repeat 50% 0%;
position: fixed;
top:0;
left: 0;
right:0 ;
bottom:0;
}
HTML
<body>
<div id="bgimg_top"></div>
....
</body>
La explicación es que la posición fijada para el div mantendrá el div en el fondo en todo momento, luego estiramos el div para seguir en todas las esquinas del navegador (siempre que el margen del cuerpo sea igual a 0) usando el (izquierda, derecha, arriba, abajo ) simultaneamente.
Por favor, asegúrese de no usar el ancho y la altura ya que esto anulará las opciones superior, izquierda, derecha e inferior.
posición: fijo funciona en android / iphone para desplazamiento vertical. Pero debe asegurarse de que sus metaetiquetas estén completamente configuradas. p.ej
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
Además, si está planeando que la misma página funcione en Android 4.0, también debe establecer la posición superior, o se agregará un pequeño margen por algún motivo.
usando jquery, puedo pensar en esto. no se desplaza suavemente, pero cumple su cometido. puede desplazarse hacia abajo, y el div fijo aparece en la parte superior.
EL CSS
<style type="text/css">
.btn_cardDetailsPg {height:5px !important;margin-top:-20px;}
html, body {overflow-x:hidden;overflow-y:auto;}
#lockDiv {
background-color: #fff;
color: #000;
float:left;
-moz-box-shadow: 0px 4px 2px 2px #ccc;-webkit-box-shadow: 0px 4px 2px 2px #ccc;box-shadow:0px 4px 2px 2px #ccc;
}
#lockDiv.stick {
position: fixed;
top: 0;
z-index: 10000;
margin-left:0px;
}
</style>
EL HTML
<div id="lockSticky"></div>
<div id="lockDiv">fooo</div>
LA JARABEZA
<script type="text/javascript">
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $(''#lockSticky'').offset().top;
if (window_top > div_top)
$(''#lockDiv'').addClass(''stick'')
else
$(''#lockDiv'').removeClass(''stick'');
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
Finalmente, queremos determinar si el iPod touch en modo horizontal o vertical para mostrar en consecuencia
<script type="text/javascript">
if (navigator.userAgent.match(/like Mac OS X/i)) {
window.onscroll = function() {
if (window.innerWidth > window.innerHeight) {
//alert("landscape [ ]");
document.getElementById(''lockDiv'').style.top =
(window.pageYOffset + window.innerHeight - 268) + ''px'';
}
if (window.innerHeight > window.innerWidth) {
//alert("portrait ||");
document.getElementById(''lockDiv'').style.top =
(window.pageYOffset + window.innerHeight - 418) + ''px'';
}
};
}
</script>
Pie de página fijo (aquí con jQuery):
if (navigator.platform == ''iPad'' || navigator.platform == ''iPhone'' || navigator.platform == ''iPod'' || navigator.platform == ''Linux armv6l'')
{
window.ontouchstart = function ()
{
$("#fixedDiv").css("display", "none");
}
window.onscroll = function()
{
var iPadPosition = window.innerHeight + window.pageYOffset-45; // 45 is the height of the Footer
$("#fixedDiv").css("position", "absolute");
$("#fixedDiv").css("top", iPadPosition);
$("#fixedDiv").css("display", "block");
}
}
// in the CSS file should stand:
#fixedDiv {position: fixed; bottom: 0; height: 45px; whatever else}
Espero eso ayude.
Una gran cantidad de navegadores móviles deliberadamente no admiten la position:fixed; sobre la base de que elementos fijos podrían interferir en una pantalla pequeña.
El sitio de Quirksmode.org tiene una muy buena publicación en el blog que explica el problema: http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html
También vea esta página para obtener un cuadro de compatibilidad que muestra la position:fixed; soporte de los navegadores móviles position:fixed; : http://www.quirksmode.org/m/css.html
(¡Pero tenga en cuenta que el mundo de los navegadores móviles se está moviendo muy rápido, por lo que las tablas como esta pueden no estar actualizadas por mucho tiempo!)
Actualización: se informa que iOS 5 y Android 4 tienen una posición: soporte fijo ahora.
Probé iOS 5 en una tienda Apple hoy y puedo confirmar que funciona con la posición fija. Sin embargo, hay problemas con el acercamiento y el barrido alrededor de un elemento fijo.
Encontré esta tabla de compatibilidad mucho más actualizada y útil que la de quirksmode one: http://caniuse.com/#search=fixed
Tiene información actualizada sobre Android, Opera (mini y móvil) y iOS.