mobile-safari - sistemas - sistema de recomendacion tesis
La barra de navegación de posición fija solo se puede hacer clic una vez en Mobile Safari en iOS5 (3)
Hay una solución aquí: http://xybrary.appspot.com/ .
No estoy diciendo que este sea el mejor, pero no pude encontrar otra cosa mejor. Intenté la solución de @Ryan Ore visitando su sitio web en un iOS 5.1 y su problema no se solucionó en absoluto.
Básicamente, se han creado dos barras de navegación fijas, la primera con una posición fija y un índice z más grande, la segunda, la posición absoluta y un índice z más bajo (por supuesto, una clase CSS diferente). Así que el original y el duplicado se colocan uno encima del otro.
Estoy usando Twitter Bootstrap para diseñar un sitio web optimizado para iPad y me estoy topando con un error interesante en Mobile Safari en iOS5.
Después de pulsar un enlace de anclaje en la barra de navegación de posición fija, me lleva correctamente a ese anclaje. Sin embargo, no puedo hacer clic en ningún otro enlace en la barra de navegación hasta que haya desplazado la página.
El problema parece estar en Bootstrap, ya que el sitio de Bootstrap tiene el mismo problema: http://twitter.github.com/bootstrap/
¿Alguna sugerencia sobre cómo solucionar esto?
El siguiente código reproduce el problema. Tenga en cuenta que si hace clic en "Probar JS" o "Probar jQuery" (dos tipos diferentes de desplazamiento, JS directo o basado en jQuery) no podrá hacer clic nuevamente hasta que no haya movido la página manualmente.
Aquí está el código de demostración básico (.jsp):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#testDiv {
position: fixed;
bottom: 0;
right: 0;
background: gray;
padding: 20px;
}
#jsDiv,
#jQueryDiv {
width: 200px;
display: block;
height: 40px;
background-color: red;
}
#jQueryDiv {
background-color: yellow;
}
</style>
<script type="text/javascript">
function testScroll() {
alert("JS");
scroll(0, 5000);
}
function testjqScroll() {
alert("JQuery");
$(window).scrollTop(500);
}
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
</head>
<body>
<%for (int i = 0; i < 500; i++) {%>
Line <%=i%><BR/>
<%}%>
Bottom
<div id=testDiv>
<a id="jsDiv" href="#" onclick="testScroll();return false;">Test JS</a>
<a id="jQueryDiv" href="#" onclick="testjqScroll();return false;">Test jQuery</a>
</div>
</body>
</html>
Siento tu dolor. Pasé al menos 6 horas tratando de resolver esto. Pero lo hice, al menos una solución dulce que funcionó para mí.
Tengo un encabezado fijo con navegación, ya que muchos encabezados tienen. El cuerpo / html se desplaza hacia abajo debajo de él. (típico)
Después de hacer clic en un botón de navegación, la página se desplaza y efectivamente mata mis botones hasta que desplazo físicamente mi cuerpo nuevamente con mi dedo. Esto de alguna manera hace que mis botones se puedan hacer clic de nuevo. Intenté todo y nadie parecía haberlo resuelto, o no compartió resultados.
html :: Al final de mi div contenedor, agregué un div vacío, sin altura / ancho
<div id="device"></div>
</div> <!--! end of #container -->
js :: Justo antes de la animación de desplazamiento, doy la altura div de 200px.
$(''#device'').css(''height'', ''200px'');
Inmediatamente después de completar la animación, quito la altura.
$(''#device'').css(''height'', ''0px'');
Eso es. Dulce truco de magia. Espero que eso ayude. Si desea un ejemplo funcional, http://ryanore.com Actualmente estoy en progreso, por lo que normalmente no dirijo ningún enlace, pero es por una buena causa.
Tuve el mismo problema. 40px aplicar una padding-top al menos 40px en su etiqueta <body> o cualquier elemento justo antes de su barra (barra de navegación o barra superior).