1、偷梁换柱。用absolute替换fixed
js获取屏幕高度,并把外部容器的高度设置为屏幕高度,给需要fixed的dom设置position:absolute。
2、监测屏幕变化
当点击输入框的时候弹出然键盘,会触发屏幕变化,一旦屏幕变小时将原来的fixed样式设置成其他的标准的流式布局。屏幕回到原来的大小时就恢复原来的fixed样式
var windowInnerHeight = window.innerHeight
window.addEventListener("resize",()=>{
if(!document.querySelector('.bottomBtn')){
return
}
if(window.innerHeight < windowInnerHeight){
document.querySelector('.bottomBtn').classList.add('staticPos')
}else{
document.querySelector('.bottomBtn').classList.remove('staticPos')
}
})