ios对于fixed属性不兼容的解决方案

最近在做支付宝口碑项目的时候的，遇到的一个的ios对position:fixed不兼容的的问题的时候的同事给出了一个解决方案，此篇博客是我简述这个解决方案(我是基于vue的写法来讲解的)。

• 常见的需求的 是在屏幕底部定位一个div，然后里面有个的input的，此时的安卓出现的软键盘的会把这个定位的div推到上面去，但是得ios的情况吧fixed的效果失效的，或产生很大的间隔

• 现给出的解决的方案的，就在我们没有focus的时候的，这个div的属性不发生改变的，当我们focus的让这个div的fixed变成的absoluted(需在body修改)，blur的时候的又变成大fixed的

//html
<footer class='footer' id='footerFixed'>
    <input @focus='addBodyClass' @blur='removeBodyClass'>
</div>

//css
#footerFixed{
    position:fixed;
    height:1rem;
    width:100%；
    bottom：0；
    left:0;
}

//js
addBodyClass(){
  console.info('add')
  document.body.classList.add('full-body');//原生的写法
  console.info(document.body.classList)
},
removeBodyClass(){
  console.info('remove')
  document.body.classList.remove('full-body')
},

//css
body {
    &.full-body{
      position: fixed !important;
      top: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow: hidden !important;
      #footerFixed{
        position: absolute;
      }
    }
  }

• 对于classList的方法 ，我们可以从http://caniuse.com/#search=classList 查看兼容性的

希望这个方法可以帮到你！！！