解决安卓移动端 input 获取焦点时底部导航被输入法顶上去的问题

在移动端使用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），我测试了一下，发现在点击虚拟键盘的隐藏按钮后，还是会出现底部导航栏从高处卡顿一下再到底部的现象，所以，就使用了隐藏与显示的效果，相对好一些。

转载请注明出处！