在移动端使用position:fixed固定底部导航的时候,如果点击了页面input、textarea这类的标签,容易导致出现虚拟键盘顶上底部导航的情况,测试了一下,苹果系统没有这种现象,面对这种问题我也百度不少的答案,但是测试之后发现都不准确,只于一种,贴出代码如下:
var mallHome = { init:function () { mallHome.callFun(); }, callFun:function () { $(".vhpSearchInput").on("focus","input",mallHome.inputStateFun); }, //获取焦点改变footer状态 inputStateFun:function () { var winHeight= $(window).height(); $(window).resize(function(){ var thisHeight=$(this).height(); if(winHeight - thisHeight >50){ $(".footerTab").css({display:"none"}); }else{ $(".footerTab").css({display:"flex"}); } }); } } mallHome.init();
代码的意思就是,在输入框获取焦点的时候,根据虚拟键盘弹出来与隐藏后的高度差相比较,又因为虚拟键盘的高度基本上不会太高,所以,页面的总高度前后相减总是大于一个数的,就把这个高度差作为判断虚拟键盘是否出现的关键,然后根据不同的情况让底部导航栏显示与隐藏,在这一步的时候,我见有人贴出的文章说是动态的改变position的属性值(如:把fixed改为absolute),我测试了一下,发现在点击虚拟键盘的隐藏按钮后,还是会出现底部导航栏从高处卡顿一下再到底部的现象,所以,就使用了隐藏与显示的效果,相对好一些。
转载请注明出处!