移动端网页滑动卡顿问题？

Question

示例代码：
<div class="box">

   <div class="header"></div>
   <div></div>
   <div></div>
   <div></div>
   ...

</div>

如上代码，box为固定高度，内容超过box高度时自动滚动（overflow-y: auto;）；
当box内容滚动一定高度时header固定住（position: 'fixed';）

此效果在iOS手机上滑动时非常卡顿，设置-webkit-overflow-scrolling: touch;属性后页面滑动流畅了，但是header元素滚动时出现异常，header跟随内容一起滚动了，只有当页面停止滚动时，header才会固定住。

请教各位大侠有遇到过类似问题的，还望指教！感恩！

Answer 1

问题基本解决，示例代码结构不变。该页面高度设为手机屏幕高度，去掉overflow-y: auto;和-webkit-overflow-scrolling: touch;的设置。监听window的滚动事件来判断滑动和设置header元素悬停。

不过还有点小问题，在iOS手机QQ里面打开网页，header元素还是跟随网页整体滚动。在微信和safari中打开网页，页面效果正常。

Answer 2

fixed 元素放到滚动容器外部

Answer 3

加入overflow-y: auto;后，会使ios的页面造成卡顿，滑到哪是哪，但是js的响应不会延迟。
加入-webkit-overflow-scrolling: touch;后，ios页面滑动有惯性，松开手指会继续滑，但是js从手指松开到滚动停止是不会响应的，知道停止后响应。

Answer 4

这里的关键是header在box达到一定高度后会置顶（top:0）的效果吧。
我使用JS来控制header的状态变更：
1.监听body.scroll
2.获取header距离页面顶部的距离offsetTop
3.判定当scroll滚动高度大于offsetTop时，给header添加fixtop样式（position: fixed;top:0;）