在做移動端的時候，很多底部固定的導航欄，目的是想讓導航欄一直固定到底部，不隨輸入鍵盤的出現而移動。在蘋果手機上沒事，但在安卓手機上彈出的鍵盤會將按鈕頂起來。事實是這樣的：一個頁面有input的時候，然后聚焦input的時候，輸入鍵盤就出現了，原本固定在底部的導航欄也不是在最底部固定着了，而是在鍵盤上部。最初的解決方法是以為用input聚焦的時候，就把固定導航欄隱藏掉，失去焦點的時候就把固定導航欄顯示。可是事實又告訴我 ，失敗了。有些手機可能行，但是有些手機，鍵盤可以隱藏，但是不可以失去焦點。所以就想到了另一個方法，也就是可行的方法：
鍵盤彈出，改變了窗口的大小；
//大概的HTML代碼 <body> <section class="section1"> <form> <input type="text" placeholder="請輸入醫生、或者門店關鍵字" class="keyName" id="serachData"> </form> <img src="./images/Search.png" alt=""> </section> <section class="section3"> <div class="more"> <div class="moreBtn">更多</div> <div class="myApoint"><a href="我的預約.html">我的預約</a></div> </div> <div class="loadMore">加載更多</div> </section> </body>
//jQuery代碼
//讓固定定位始終定在手機的同一個位置
//先定義一個變量，當改變窗口大小的時候用來做判斷
var flagKey=false;
$(".keyName").on("focus",function () {
flagKey=true;
})
window.onresize =function(){
if(flagKey){
$(".more").css("position","initial");
flagKey=false;
}else{
$(".more").css("position","fixed");
if(document.activeElement.id =="serachData"){
flagKey = true;
}
}
};