почему нижний колонтитул перемещается после слайда страницы

Question

У меня есть простая страница с фиксированным верхним и нижним колонтитулом. Когда он перемещается со страницы 1 на страницу 2, нижний колонтитул на странице сначала отображается в том месте, где заканчивается содержимое страницы 2 (несколько посередине), а затем, когда страница завершает скольжение, нижний колонтитул снова перемещается и перемещается вниз. Есть ли способ избежать этого?

Answer 1

Я считаю, что это ошибка в JQM.Это происходит, когда содержимое страницы короче размера экрана.

Мое образованное предположение, почему это происходит:

• После переходов JQM запускает updateLayout , который пересчитывает позицию нижнего колонтитула путем скрытия-пересчета-показа
• Панели инструментов скрываются с помощью свойства CSS: top и устанавливают его в 0
  Таким образом, на длинной странице, чтобы скрыть нижний колонтитул CSS: top установлен на 0 , толкая нижний колонтитул вниз, где он будетбыть в статичном потоке страниц = конец вашего документа.
• Чтобы показать нижний колонтитул, JQM вычисляет, где вы находитесь на своей странице, в зависимости от размера экрана и высоты нижнего колонтитула, и предлагает немного CSS: top = -12345px.Проверьте CSS-верх в Firebug, когда нижний колонтитул виден.

= чтобы скрыть: CSS-top = 0
= показать: CSS-top = -1234px

сейчасесли ваша страница короче, чем высота экрана (экран 600px, например, страница 200px), скрыв нижний колонтитул, установив CSS: top = 0 прикрепит его к концу страницы, который находится прямо всередина экрана на 200 пикселей.

Поскольку updateLayout пересчитывает позицию нижнего колонтитула, он отображается скрытно-пересчитан.И вот у вас есть ваш прыжковый нижний колонтитул.

Я сделал исправление с помощью запроса на загрузку Github - https://github.com/jquery/jquery-mobile/pull/3050.

Я полагаю, поскольку панели инструментов переключатся в pos: исправлено с помощьюJQM 1.1.никто не удосужился втянуть его.Но это все же работает.

Answer 2

В обработчике события pageshow на второй странице вы можете попробовать добавить следующий фрагмент кода:

$.mobile.fixedToolbars.show(true);