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; }
解决方法
我的switchitoff.net网站上的搜索框也有同样的问题.在IOS5中,如果搜索框在页面滚动时获得了焦点,则固定标题将跳到页面.我尝试了各种解决方法,而我目前拥有的是< div>它位于搜索框上.当这个< div>点击下列情况发生：
>页面滚动到顶部
>固定标题更改为绝对
>< div>覆盖搜索框是隐藏的
>搜索< input>集中精力
当搜索框失去焦点时,上述步骤相反.当搜索框被单击时,此解决方案可防止标题跳下页面,但是对于更简单的站点,您可能最好使用绝对定位.
IOS5和固定定位还有一个棘手的问题.如果您的固定区域上有可点击的元素,则身体元素会在其后面滚动,这可能会破坏您的触摸事件.
例如,在switchitoff.net上,当交互元素在其后面滚动时,固定标题上的按钮变得不可点击.当这些按钮被敲击时,touchstart甚至没有被触发.幸运的是,onClick仍然似乎有效,尽管这是因为延迟而永远是IOS的最后手段.
最后注意到(在IOS5中),您可以点击固定的标题并滚动页面.我知道这可以模拟您在普通浏览器中使用滚动条在固定标题上的方式,但是这种范式对于toucH-ui来说无益于什么？
希望苹果公司将继续改进固定元件的处理,但如果您在固定区域有任何交互式的话,同时也更容易坚持绝对定位.当事情变得如此简单,那么或者回到IOS4
原文地址：https://www.jb51.cc/css/217103.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
