ios html5头部无法固定的问题(安卓正常)

     需求:头部菜单导航固定,中间正文可以拉动,在安卓手机正常,在ios上下拉的时候头部被带下来,有卡顿用户体验也不会,解决方法如下:

      有问题的布局代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="page">
<div  class="header">
头部固定
</div>
<div>
正文
</div>
</div>
 
<style>
.header{
position:fixed;
top:0;
}
 
.page{
position:absolute;
overflow-y:scroll;
}
</style>

    正确的布局方式是

复制代码
<div  class="header">
头部固定
</div>
<div class="page">
正文
</div>

<style>
.header{
position:fixed;
top:0;
}

.page{
position:absolute;
overflow-y:scroll;
-webkit-transform: translateZ(0); --硬件加速
}
</style>
复制代码

问题解决!
转载  http://www.itxst.com/detail/mb3qzfzm.html 

posted @   logspool  阅读(464)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示