Creación de un elemento de posición fija "adhesivo" que funciona en iOS Safari

Question

En el safari de iOS, la panorámica con un solo dedo no genera ningún evento hasta que el usuario deja de panoramizar. Un evento onscroll solo se genera cuando la página deja de moverse y volver a dibujarse.

Necesito una forma de detectar el desplazamiento en tiempo real. Específicamente, quiero hacer un menú adhesivo que también funcione en iOS safari. En los navegadores que no son móviles, el menú adhesivo se puede hacer cambiando de "posición relativa" a "posición fija" en el elemento mientras se escucha el evento onscroll. Este método no funcionará en el navegador móvil porque los eventos onscroll no se activan continuamente. ¿Que puedo hacer?

Answer 1

Respondiendo a mi propia pregunta. iOS7 ahora admite la posición: pegajoso Demo: http://html5-demos.appspot.com/static/css/sticky.html

Answer 2

Si todo lo que quiere es un menú adhesivo, puede ahorrarse algunos dolores de cabeza al usar una biblioteca existente. He tenido éxito con iScroll:

http://cubiq.org/iscroll

Por lo menos, se puede echar un vistazo a cómo funciona esto y basar su solución de alrededor de eso.

Happy hacking!

Answer 3

Viejo tema seguro, pero puedo ver muchas visitas aquí. Si todo lo que quiere es un menú adhesivo, puede usar el posicionamiento fijo. No hay necesidad de iScroll allí.

Answer 4

Recientemente he pasado muchas horas tratando de encontrar una solución práctica para el mismo problema. No hay una forma correcta de hacerlo, aunque hay algunos hacks decentes (la mayoría ya se mencionó). El problema es que JavaScript está en pausa mientras el usuario está desplazándose. Tiene sentido cuando se tienen en cuenta las implicaciones, pero dificulta la implementación del elemento de posición fija.

Lo mejor que he podido encontrar es esta maravillosa publicación de la gente de Google. Puede consultar http://gmail.com en el safari móvil para verlo en acción.

https://developers.google.com/mobile/articles/webapp_fixed_ui

Espero que esto ayude.

Answer 5

Tuve un problema similar y los manejadores atados tocan/tocan/tocan/usando jquery para detectar el desplazamiento con un solo dedo y funcionó perfectamente. En mi caso, tuve que mover otro elemento de la misma cantidad que el movimiento intentado de otro elemento y se actualizó muy bien cuando se intentó el desplazamiento, por lo que debería ser adecuado para su requerimiento.