原因:html、body設置了 height: 100% 的自適應布局后,高度跟隨屏幕的可用高度改變而改變導致的。
解決辦法:
1、不使用 fixed 定位,使用替代方案(推薦):
a:使用 position:absolute; overflow-y:scroll;
b:使用 display:flex; overflow-y:scroll;
其中,a方案內容區域的高度通過js控制;b方案內容區域的高度通過flex布局自動排版;
2、根據輸入框獲取焦點與失去焦點事件切換 fixed 定位與 static 定位
也可以根據軟鍵盤是否彈起,是否改變屏幕可用高度,來改變 定位方式 或 顯示隱藏 fixed定位元素
docmHeight: document.documentElement.clientHeight, // 默認屏幕高度
showHeight: document.documentElement.clientHeight, // 實時屏幕高度
hideshow: true // 顯示或者隱藏
// 監聽
watch:{
showHeight: function() {
if(this.docmHeight > this.showHeight) {
this.hideshow = false
} else {
this.hideshow = true
}
}
}
