针对移动端软键盘调用后,fixed定位失效部分解决方案

时间:2025-04-08 10:38:35

1、偷梁换柱。用absolute替换fixed

js获取屏幕高度,并把外部容器的高度设置为屏幕高度,给需要fixed的dom设置position:absolute。

2、监测屏幕变化

当点击输入框的时候弹出然键盘,会触发屏幕变化,一旦屏幕变小时将原来的fixed样式设置成其他的标准的流式布局。屏幕回到原来的大小时就恢复原来的fixed样式

 var windowInnerHeight = 
 ("resize",()=>{
  if(!('.bottomBtn')){
    return
  }
  if( < windowInnerHeight){
     ('.bottomBtn').('staticPos') 
  }else{
   ('.bottomBtn').('staticPos')
  }
})