Position:固定在输入被聚焦时在iOS5中移动

Question

我在我的移动应用程序的顶部有一个名为position:fixed的div，所以它将停留在浏览器的顶部(它在iOS4和更低版本中滚动离开，这是很好的)。当输入被聚焦并弹出键盘时，div向下移动到页面的中间。查看截图：

http://dbanksdesign.com/ftp/photo_2.PNG

编辑:这是一个简化的测试页面：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时，您最好对fixed元素使用absolute定位。是的，IOS5确实声称支持fixed定位，但是当你在固定元素中有交互式控件时，它就完全崩溃了。

我的switchitoff.net站点上的搜索框也有同样的问题。在IOS5中，如果搜索框在页面滚动时获得焦点，固定的标题将跳过页面。我尝试了各种变通方法，我目前使用的是一个位于搜索框上方的<div>。单击此<div>时，将发生以下情况：

1. 页面滚动到顶部
2. fixed标题变为absolute
3. The fixed覆盖搜索框隐藏
4. search <input> is

<代码>H218

当搜索框失去焦点时，上述步骤被颠倒。此解决方案可防止单击搜索框时页眉跳下页面，但对于简单的站点，最好首先使用绝对定位。

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

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

最后，请注意(在IOS5中)如何单击固定的标题并滚动页面。我知道这模拟了你可以在普通浏览器的固定标题上使用滚轮的方式，但这种范例对触摸式UI肯定没有意义？

希望苹果将继续改进固定元素的处理，但在此期间，如果您的固定区域有任何交互式内容，则更容易坚持使用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');
});

注意，我使用id作为输入，textinput-container作为包含输入的textinput顶栏。

设置另一个绑定来检测输入何时不再在焦点上，以便将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：section#footer *{位置:固定；底部:0；左侧:0；高度:42px }*