在手機端開發過程可能會遇到這樣一個問題：底部有一個固定定位的按鈕，然而每次一點選輸入框，彈出輸入法的時候，這個底部的按鈕會隨著輸入法被頂上去。

解決方法是，呼叫瀏覽器視窗改變時執行的函式。

//原生 JS
window.onresize = function(){
    console.log("視窗發生改變了喲！");
}

//css
.btns {
	position: fixed;
	bottom: 52px;
	width: 100%;
	height: 32px;
}
.btns.p_static {
	position: static;
}	


// js
// 使用 jquery
$(window).resize(function(event) {
    if( $('.btns').hasClass('p_static') ){
        $('.btns').removeClass('p_static');
    }else{
        $('.btns').addClass('p_static')
    }
});

 

通過給固定定位切換定位方式來實現，調起輸入法時，瀏覽器視窗發生改變，執行函式，將原先是固定定位的元素改為粘性定位(position:static;)。當關閉輸入法時再切換回固定定位。