在做移动端的时候，很多底部固定的导航栏，目的是想让导航栏一直固定到底部，不随输入键盘的出现而移动。在苹果手机上没事，但在安卓手机上弹出的键盘会将按钮顶起来。事实是这样的：一个页面有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;
}
}
};