dba*_*ign 15 css position css-position ios5
我在我的移动应用程序的顶部有一个div位置:固定所以它将保持在浏览器的顶部(它在ios 4中滚动并且更低,这很好).当输入被聚焦并调出键盘时,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; }
不幸的是,在使用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!
使用JohnW recomendation absolute而不是fixed我想出了这个解决方法:
首先设置a 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输入的id 和textinput-container包含输入的div顶部栏.
设置另一个绑定以检测输入何时不在焦点上以更改div的位置 fixed
$('#textinput').bind('blur',function(e) {
$('#textinput-container').css('position','fixed');
$('#textinput-container').css('top','0px');
});
我一直在使用一个类似的解决方案,固定在页面底部的条形码,发布的代码应该适用于固定在顶部的栏,但我没有测试它