Tworzenie "przyklejonej" pozycji o ustalonej pozycji działającej w Safari na iOS

Question

W Safari iOS, przesuwanie jednym palcem nie generuje żadnych zdarzeń, dopóki użytkownik nie przestanie przesuwać. Zdarzenie onscroll jest generowane tylko wtedy, gdy strona przestaje się poruszać i przerysowywać.

Potrzebuję sposobu na wykrycie przewijania w czasie rzeczywistym. W szczególności chcę stworzyć lepkie menu, które będzie działać również na iOS safari. W przeglądarkach innych niż mobilne, lepkie menu można zrobić, przełączając się pomiędzy "pozycją względną" i "pozycją ustaloną" na elemencie podczas słuchania zdarzeń onscroll. Ta metoda nie działa w przeglądarce mobilnej, ponieważ zdarzenia onscroll nie są uruchamiane w sposób ciągły. Co mogę zrobić?

Answer 1

Odpowiadając na moje własne pytanie. iOS7 obsługuje teraz pozycję: Przyklejony Demo: http://html5-demos.appspot.com/static/css/sticky.html

Answer 2

Jeśli wszystko, czego chcesz, to lepkie menu, możesz zaoszczędzić sobie bólu głowy, używając istniejącej biblioteki. Miałem sukcesu z iScroll:

http://cubiq.org/iscroll

Przynajmniej można przyjrzeć się, jak to działa i oprzeć swoje rozwiązanie wokół tego.

Happy hacking!

Answer 3

Stary temat na pewno, ale widzę tu wiele wizyt. Jeśli chcesz, to jest lepkie menu, możesz użyć stałego pozycjonowania. Nie potrzebujesz tam iScroll.

Answer 4

Ostatnio wiele godzin spędziłem na próbach znalezienia praktycznego rozwiązania tego samego problemu. Nie ma sposobu, aby to zrobić, chociaż istnieje kilka przyzwoitych hacków (większość z nich już wspomniano). Problem polega na tym, że JavaScript jest wstrzymywany, gdy użytkownik przewija. Ma to sens, gdy bierze się pod uwagę implikacje, ale sprawia, że ​​trudno jest zaimplementować stały element pozycjonowany.

Najlepszą rzeczą, jaką udało mi się znaleźć, jest ten wspaniały post od ludzi z Google. W mobilnym safari możesz sprawdzić, czy nie jest to http://gmail.com.

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

Nadzieja to pomaga.

Answer 5

Miałem podobny problem i związane procedury obsługi do touchstart/touchmove/touchend przy użyciu jquery, aby wykryć przewijanie jednym palcem i działało idealnie. W moim przypadku musiałem przesunąć kolejny element o taką samą ilość, jak próba przeniesienia innego elementu i ładnie się zaktualizował, tak jak próbował przewijać, więc powinien być odpowiedni do twoich wymagań.