移动端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>
浙公网安备 33010602011771号