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: '' })
})

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