移动端fixed固定在底部当软键盘被唤起失效的问题

<div class="voin_bottom" style="height:0;position:absolute;bottom:5rem;left:0;"></div>   <!--额外增加一个高度为0的div,用于来获取软键盘收起和换出屏幕的高度-->

 

<!--通过fixed定位在底部的导航-->

<ul class="personal_bottom clearfix">
<li>
<a href="javascript:void(0)">
<div class="per_li_home"></div>
<p>首页</p>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="per_li_personal"></div>
<p>个人中心</p>
</a>
</li>
</ul>

<script type="text/javascript">

// 软键盘顶起底部导航
var winHeight = $(window).height(); //获取当前页面高度
$(window).resize(function(){
var thisHeight=$(".voin_bottom").offset().top;    //额外增加一个高度为0的div,通过这个高度的变化来控制底部fixed导航的位置
if(winHeight - thisHeight >150){     //150是小于软键盘的高度
//当软键盘弹出,在这里面操作
$('.personal_bottom').css('position','static');

}else{
//当软键盘收起,在此处操作
$('.personal_bottom').css('position','fixed');

}
});

</script>

posted on 2018-08-22 14:12  ping11  阅读(101)  评论(0)    收藏  举报