La création d'un “post-it” à position fixe de l'élément qui fonctionne sur iOS Safari
Sur iOS safari, un recadrage au doigt ne génère pas d'événements jusqu'à ce que l'utilisateur arrête le panoramique. Un onscroll événement n'est généré lorsque la page de cesse de se déplacer et redessiné.
J'ai besoin d'un moyen de détecter en temps réel de défilement. Plus précisément, je veux faire un sticky menu qui fonctionne également sur iOS safari. Sur la non-navigateurs mobiles, sticky menu peut être fait par commutation entre "position relative" à "position fixe" sur l'élément tout en écoutant de la onscroll événements. Cette méthode ne fonctionnera pas sur un navigateur mobile, car onscroll les événements ne sont pas en permanence à feu. Que puis-je faire?
- Un (quoique hacker-ish) de manière à mettre en œuvre, il pourrait être de faire votre propre Panoramique vertical geste reconnu et l'ajouter à la vue web. De cette façon, vous pouvez utiliser l'état de la propriété à recevoir des événements.
- se lient à toucher les déplacer et contrôler l'axe de la page
Vous devez vous connecter pour publier un commentaire.
Pour répondre à ma propre question. iOS7 maintenant en position de soutien:collant
Démonstration: http://html5-demos.appspot.com/static/css/sticky.html
J'ai récemment passé de nombreuses heures à essayer de trouver une solution pratique pour le même problème. Il n'y a pas de bonne façon de le faire, mais il ya un peu décent hacks (la plupart d'entre eux déjà mentionné). Le problème, c'est que JavaScript est suspendu pendant que l'utilisateur fait défiler. Il est logique si l'on considère les implications, mais il fait sacrément dur à mettre en œuvre fixe positionné sur l'élément.
La meilleure chose que je ai été en mesure de trouver ce magnifique post par les gens de chez Google. Vous pouvez consulter http://gmail.com dans le navigateur safari mobile pour le voir en action.
https://developers.google.com/mobile/articles/webapp_fixed_ui
Espère que cette aide.
J'ai eu un problème similaire et lié des gestionnaires d'évènements touchstart/touchmove/touchend à l'aide de jquery pour détecter la seule défilement au doigt et cela a fonctionné parfaitement. Dans mon cas, j'avais besoin de déplacer un autre élément du même montant que la tentative de se déplacer d'un autre élément et mis à jour bien que le défilement a été tentée, de sorte qu'il doit être adapté à votre exigence.
Si tout ce que vous voulez, c'est un collant de menu, vous pouvez vous épargner les maux de tête en utilisant une bibliothèque existante. J'ai eu du succès avec iScroll:
http://cubiq.org/iscroll
À tout le moins, vous pouvez prendre un coup d'oeil à la façon dont cela fonctionne, et la base de votre solution autour de cela.
Happy hacking!
Vieux sujet, mais je peux voir beaucoup de visites ici. Si tout ce que vous voulez, c'est un collant de menu, vous pouvez utiliser la correction du positionnement. Pas besoin de iScroll là.