h5 ios中软键盘弹起后 fixed定位失效

position: fixed;在ios手机中会存在一个失效情况：
如果页面有输入框存在，点击输入框软键盘弹起后会发生一个现象:
1.针对当前内容高度小于屏幕高度时：
上下滑动页面时候，发现之前fixed定位在顶部的元素会跟随页面滚动，变成了absolute定位的效果。
2.针对当前内容高度大于屏幕高度时：
之前fixed定位在顶部的View不见了，下滑往上翻页面后，就会看那个fixed定位的元素错落在页面中，但并不是在最顶部。
综上可以看出，ios浏览器是针对fixed定位的元素作了处理，不再是之前定位效果，变成了absolute定位的效果但并不是absolute，但可以理解为top：对应为当前body的scrollTop值。
那么该怎么解决这个问题呢？

在这里我是比较倾向于遵循ios浏览器处理fixed元素的初衷，浏览器去处理fixed元素应该是有它考虑的地方，退一步说其实也没有必要在这个情况下强制显示顶部元素，这时候用户的重点在于输入。
这里给出的方案就是：在软键盘弹起后，直接把fixed的元素变成absolute的，不需要浏览器自己去做处理，待键盘收起后再恢复成fixed。
可以看一下上一篇博客监听软键盘的弹起、收起

以下代码环境是在React中
document.body.addEventListener('focusin', () => {
    //软键盘弹出的事件处理
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    //注只针对ios 、处在滚动中位置时
    isIphone() && scrollTop > 0 && this.setState({ className: 'postion-absolute' })
})
document.body.addEventListener('focusout', () => {
      //软键盘收起的事件处理
     isIphone() && this.setState({ className: '' })
})

还有其他解决方案：
1.使用第三方插件，针对ios使用 iScroll的解决方案。
2.参考这个文章，对布局结构做下调整分header| scroll-content |footer