Позиция: фиксированная в iOS5 Перемещение при фокусировке ввода

Ответ 1

К сожалению, вам, вероятно, лучше всего использовать absolute позиционирование для ваших элементов fixed при работе с IOS. Да, IOS5 заявляет о поддержке позиционирования fixed, но все это падает, когда у вас есть интерактивные элементы управления в этом фиксированном элементе.

У меня была такая же проблема с полем поиска на моем switchitoff.net сайте. В IOS5 фиксированный заголовок будет сбрасывать страницу, если окно поиска получило фокус при прокрутке страницы. Я пробовал различные обходные пути, и тот, который у меня есть, - это <div>, который находится над окном поиска. При нажатии этого <div> происходит следующее:

• Страница прокручивается вверху
• Заголовок fixed изменен на absolute
• <div>, охватывающий окно поиска, скрыт
• Поиск <input> сфокусирован

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

Есть еще одна сложная проблема с IOS5 и фиксированным позиционированием. Если в области fixed есть элементы с интерактивным доступом, а элементы body прокручиваются позади них, это может нарушить ваши события касания.

Например, на switchitoff.net кнопки на фиксированном заголовке стали неприметными, когда за ними прокручивались интерактивные элементы. touchstart даже не запускался, когда эти кнопки были нажаты. К счастью, onClick все еще работал, хотя это всегда является последним средством для IOS из-за задержки.

Наконец, обратите внимание, как (в IOS5) вы можете щелкнуть фиксированный заголовок и прокрутить страницу. Я знаю, что это эмулирует то, как вы можете использовать колесо прокрутки по фиксированному заголовку в обычном браузере, но, безусловно, эта парадигма не имеет смысла для сенсорного интерфейса?

Мы надеемся, что Apple продолжит совершенствовать обработку фиксированных элементов, но тем не менее легче придерживаться позиционирования absolute, если у вас есть что-то интерактивное в вашей фиксированной области. Это или вернитесь к IOS4, когда все стало намного проще!

Ответ 2

Используя рекомендацию JohnW для использования absolute вместо fixed, я применил это обходное решение:

Сначала настройте a bind, чтобы определить, когда вход находится в фокусе, прокрутите до верхней части страницы и измените элемент position на absolute:

$('#textinput').bind('focus',function(e) { 
  $('html,body').animate({
        scrollTop: 0
   });
  $('#textinput-container').css('position','absolute');
  $('#textinput-container').css('top','0px');
});

Обратите внимание, что я использую id textinput для ввода и textinput-container для верхней строки div, содержащей вход.

Настройте другое связывание, чтобы определить, когда вход больше не находится в фокусе, чтобы изменить положение div обратно на fixed

$('#textinput').bind('blur',function(e) { 
   $('#textinput-container').css('position','fixed');
  $('#textinput-container').css('top','0px');
});

Я использую аналогичное решение для бара, закрепленного в нижней части страницы, код, который должен быть выполнен, должен работать на баре, закрепленной наверху, но я не тестировал его

Ответ 3

Модифицированная версия решения pablobart, но без прокрутки вверх:

// Absolute position
$('#your-field').bind('focus',function(e) { 
    setTimeout(function(){
        $('section#footer').css('position','absolute');
        $('section#footer').css('top',($(window).scrollTop() + window.innerHeight) - $('section#footer').height());
    }, 100);
});

// Back to fixed position
$('#your-field').bind('focusout',function(e) { 
    $('section#footer').removeAttr('style');
});

Простой CSS: раздел # сноска * {позиция: фиксированная; внизу: 0; Слева направо: 0; высота: 42px} *

Ответ 4

Это решение работает очень хорошо для меня. Весь код делает это до тех пор, пока пользователь не коснется текстового поля, а затем изменит элемент, идентифицированный параметром "jQuerySelector", от "фиксированной" до "статической" позиции. Когда текстовое поле теряет фокус (пользователь нажимает на что-то другое), позиция элемента изменяется на "fixed".

// toggles the value of 'position' when the text field gains and looses focus
var togglePositionInResponseToInputFocus = function(jQuerySelector)
{
   // find the input element in question
   var element = jQuery(jQuerySelector); 

   // if we have the element
   if (element) {

      // get the current position value 
      var position = element.css('position'); 

      // toggle the values from fixed to static, and vice versa
      if (position == 'fixed') {
          element.css('position', 'static'); 
      } else if (position == 'static') {
          element.css('position', 'fixed'); 
      }
    }
}; 

И связанные обработчики событий:

var that = this; 

// called when text field gains focus
jQuery(that.textfieldSelector).on
(
    'focusin', 
    function()
    {
        togglePositionInResponseToInputFocus(that.jQuerySelector); 
    }
);

// called when text field looses focus
jQuery(that.textfieldSelector).on
(
   'focusout',
    function()
    {
        togglePositionInResponseToInputFocus(that.jQuerySelector); 
    }
 );

Ответ 5

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

Если вы можете догадаться, насколько перемещена кнопка (в зависимости от того, сколько контента перемещено), вы можете нажать на невидимую кнопку, и она будет нормально работать. Другими словами, если контент прокручивается на 50 пикселей, нажмите кнопку "50 пикселей" от кнопки, и он будет работать.

Вы можете прокручивать содержимое вручную (даже небольшим количеством), и кнопки снова будут работать, как ожидалось.

Ответ 6

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