怎样在移动端的导航栏布局上解决通常position:fixed;写法带来在出现虚拟键盘时产生的bug

Question

之前用了 iscrool.js 来解决这个问题，但是我突然又觉得单为了这么个问题而专门引用个框架，有点“大动干戈”，不知各位有什么好方法？

Answer 1

楼主可以参考这篇博客：Web移动端Fixed布局的解决方案

Answer 2

其他的我还太清楚，我自己一般是这样处理的：通过absolute代替fixed。如果还有软键盘遮盖掉了输入框，那么可以用一下下面的这个方法。输入框获取焦点后，手动的调整滚动条的位置。参考代码如下(我用到了zepto/jquery)：

<input type="text" data-make="doScroll" class="insertInput" placeholder="请输地址">

$("input").focus(function(){
        //获取值
        var makeDo = $(this).attr("data-make");

        //事件适配器
        var doSomething = {
            "doScroll":changeInputScroll
        };

        if ( makeDo && doSomething.hasOwnProperty(makeDo) ) {
            doSomething[makeDo]($(this),$("#mainCon"));
        }
    });

    //获取焦点的时候，动态的改变滚动条的位置
    function changeInputScroll($input,$con){
        var viewTop     = $con[0].scrollTop,//当前的滚动条高度
            viewBottom  = viewTop + $con[0].innerHeight,//当前容器的高度
            viewShowTop = $con.offset().top;//当前视口的位置

        var elementTop    = $input.offset().top, //当前对象，在页面中的位置
            elementBottom = elementTop + $input.height() - viewShowTop;//要移动的距离
        //设置滚动条位置
        $con.scrollTop(elementBottom);
    }