2010-07-30 11 views
10

En el sitio móvil que estoy construyendo, necesito que el encabezado superior permanezca fijo.Posicionamiento fijo para navegadores móviles

Soy consciente de la solución de posición fija para Mobile Safari como se ve aquí:

http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

Yo probé y funciona bien. Sin embargo, me preguntaba si existe una única solución que funcione para todos los principales navegadores móviles de teléfonos inteligentes. Nota: No necesito que el pie de página esté fijo, solo el encabezado superior. Así que esto debería facilitar el acomodo para todos los tamaños de pantallas móviles ya que solo estaría configurando la parte superior del div en 0 en Desplazamiento.

Gracias!

+0

También tenga en cuenta que Mobile Safari en iOS 5 admite 'posición: fijo'. –

+0

aha Jin, el posicionamiento fijo funciona bien ahora –

Respuesta

6

Importante actualización

A partir de iOS 5, posicionamiento fijo funciona bien en el móvil. De manera similar, los últimos androides lo admiten.


respuesta Antiguo

Creo iScroll es la solución más activamente desarrollado, soporta Android

Pero hay algunas cosas a tener en cuenta:

  1. Al habilitar este truco estás desactivando las funciones que a las personas les gusta usar el zoom.
  2. Añade mucha complejidad a su solución.

Por estas razones jQTouch decidieron not to use it:

No es un problema. Actualmente no es compatible con en jQTouch. No estoy seguro de cómo es familiar, pero el problema principal aquí es que Safari móvil no admite posición de soporte: fijo. Algunas personas han trabajado en implementaciones de esto, más notablemente Cubiq y Doctyper. Ambos se sienten mal a mí, lo tanto por qué no lo hago por defecto, pero usted es libre de tratar de hacer una extensión cuales IT soporta

lo personal cuando se trata de cosas que necesita posicionamiento fijo en un iPhone prefiero ir con el posicionamiento estático y simplemente desplazarme automáticamente hacia abajo/arriba al cambiar el contenido dinámicamente.

+2

Tenga en cuenta que a partir de julio de 2011, iScroll realmente admite pellizcar/zoom. –

+0

¿cómo los sitios web como http://www.wikia.com/Wikia obtienen una pieza fija perfecta en la parte inferior? Lo he visto también en fixya.com – Mikhail

+0

@Mikhail actualizado –

0

Siguiendo el enlace que publicó Sam Saffron, parece que una nueva versión de iScroll (versión 4) ha resuelto algunos de los problemas que Sam mencionó.

iScroll-4

Además de todas las características iScroll anteriores, la versión 4 introduce:

  • pizca/zoom
  • Tire hacia arriba/abajo para refrescar
  • Mejora de la velocidad y el impulso
  • Ajustar al elemento
  • barras de desplazamiento personalizables

sólo han mirado los demos en su sitio, por lo que no pueden dar fe de ello, pero se ve bien!

2

Me enfrentaba el mismo problema durante más de dos semanas. Y esta solución funcionó para mí. Solo incluya

-webkit-backface-visibility: hidden;

en el css del elemento junto con la posición: fijo.

Funcionará bien

+0

¡Gracias! esto hizo el truco. – HBK

Cuestiones relacionadas