Вопрос об учебнике Google: «Реализация iOS-приложения с фиксированной позицией»

Question

All

Я работаю над веб-приложением для iOS, которое использует заголовок с фиксированной позицией (очень похоже на мобильный интерфейс Gmail).

Поскольку мобильные браузеры игнорируют position:fixed, это немного сложно.

Затем я нашел отличную статью Google о том, как они реализовали ее для мобильной версии Gmail:

http://code.google.com/mobile/articles/webapp_fixed_ui.html

Единственная проблема - они пропустили несколько ключевых фрагментов кода (как «упражнения для читателя»). Я не знаю, сделали ли они это для защиты своего кода или просто для краткости учебника.

В любом случае, я смог заполнить большинство, но не все недостающие фрагменты. Часть, на которой я застрял ... что делать, если импульс переходит прокручиваемую область за границы прокручиваемой рамки.

Вот что предлагает статья:

В нашей реализации мы обнаруживаем этот случай и обрабатываем его, ставя в очередь несколько переходов. Первый переход приводит нас к границе, здесь конечная скорость не равна нулю, поэтому нам нужна другая функция синхронизации кубического Безье. Второй переход немного отскакивает от границы, конечная скорость равна нулю, поэтому мы можем использовать функцию синхронизации кубического Безье, показанную выше. Третий переход замедляет контент обратно до границы, используя встроенную функцию замедления.

Это имеет смысл, но кое-что я не могу понять ...

1. Как указать переход веб-набора с помощью функции синхронизации, в которой конечная скорость НЕ равна нулю? Другими словами, когда вы используете кубический Безье для функции синхронизации, вы можете указать только две средние контрольные точки - предполагаются fisrt (0,0) и last (1,1). Итак, разве конечная скорость ВСЕГДА не равна нулю?

2. Как вы рассчитываете, какая скорость ДОЛЖНА быть при достижении границы?

Если бы кто-то проработал детали этого и хотел бы поделиться им - это было бы очень признательно!

Answer 1

Для № 2, отработка

v _f ² = v _i ² + 2 * a * d

скорость на границе будет:

var speedAtBoundary = (Math.sqrt (Math.pow (скорость, 2) + (2 * ускорение * distanceToBoundary))) * ((скорость> 0)? 1: -1);

Похоже, у вас уже есть скорость и ускорение. Как только вы определите расстояние до границы, вам будет хорошо идти.

Вы выяснили № 1?

Answer 2

Вы можете использовать position: -webkit-sticky;. Недавно я обнаружил, что могу использовать его, и это было замечательно . (iOS 6+, кстати)

Answer 3

Как показано на сайтах слухов, утечки iOS5 показали, что обходных путей больше не будет необходимости. положение: исправлено, просто работает.