Question

我的移动应用程序顶部有一个div位置：固定所以它将保持在浏览器的顶部（它在ios 4中向下滚动并且更低，这很好）。当输入被聚焦并调出键盘时，div向下移动到页面的中间。见截图：

编辑：这是一个简化的测试页面： http://dbanksdesign.com/test/

<body>
<div class="fixed"><input type="text" /></div>
<div class="content"></div>
</body>

.fixed { position:fixed; top:0; left:0; width:100%; background:#ccc; }
.content { width:100%; height:1000px; background:#efefef; }

Answer 1

不幸的是，在使用IOS时，最好使用absolute定位fixed元素。是的，IOS5确实声称支持fixed定位，但是当您在该固定元素中拥有交互式控件时，这一切都会失败。

我的switchitoff.net网站上的搜索框遇到了同样的问题。在IOS5中，如果搜索框在页面滚动时获得焦点，则固定标题将跳过页面。我尝试了各种解决方法，而我现在拥有的是<div>，它位于搜索框之上。单击此<div>时，会发生以下情况：

页面滚动到顶部
fixed标题已更改为absolute
隐藏搜索框的<div>
搜索<input>重点关注

当搜索框失去焦点时，上述步骤相反。此解决方案可以防止在单击搜索框时页眉向下跳转，但对于更简单的站点，您可能最好首先使用绝对定位。

IOS5和固定定位还有另一个棘手的问题。如果您的fixed区域中的可点击元素在其后面滚动了body元素，则可能会破坏您的触摸事件。

例如，在switchitoff.net上，当交互式元素在其后面滚动时，固定标题上的按钮变得不可点击。点击这些按钮时，touchstart甚至没有被解雇。幸运的是onClick似乎仍然有效，尽管由于延迟，这总是IOS的最后手段。

最后注意如何（在IOS5中）您可以单击固定标题并滚动页面。我知道这可以模拟在普通浏览器中使用滚轮覆盖固定标题的方式，但是这个范例肯定对触摸UI没有意义吗？

希望Apple会继续改进固定元素的处理，但与此同时，如果您的固定区域中有任何交互式内容，则更容易坚持absolute定位。当事情变得如此简单时，或者回到IOS4！

Answer 2

使用JohnW推荐使用absolute代替fixed我想出了这个解决方法：

首先设置bind以检测输入何时为onFocus，滚动到页面顶部并将元素position更改为absolute：

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

请注意，我使用标识textinput作为输入，textinput-container作为包含输入的div顶部栏。

设置另一个绑定以检测输入何时不在焦点上以将div的位置更改回fixed

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

我一直在使用类似的解决方案来固定在页面底部的一个栏，所发布的代码应该适用于固定在顶部的栏，但我没有测试它

Answer 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：部分＃页脚 * {position：fixed;底部：0;左：0;身高：42px} *

Answer 4

此解决方案对我来说效果很好。所有代码都要等到用户点击文本字段，然后将'jQuerySelector'参数标识的元素从'fixed'更改为'static'位置。当文本字段失去焦点（用户点击其他内容）时，元素的位置将变回“固定”。

// 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); 
    }
 );

Answer 5

按钮变得不可点击的原因是因为它们实际上与内容无形地滚动。它们仍在那里，只是不在它们原来的位置，也不在你看到它们的位置。

如果您可以猜出按钮的移动量（根据内容的移动程度），您可以单击隐藏按钮，它将正常运行。换句话说，如果内容已滚动50像素，请点击按钮50像素，它将起作用。

您可以手动滚动内容（即使是很少量），按钮将再次按预期工作。

Answer 6

只需隐藏焦点上的固定元素，然后在焦点上再次显示它。我打赌你的用户在专注时不需要看到它。我知道这不是解决方案，但我认为这是一种更好的方法。保持简单。

位置：在iOS5中固定在输入聚焦时移动

6 个答案: