input获取焦点时底部菜单被顶上来问题的解决办法

<div class="search-box">
  <input class="search-input" type="text" placeholder="请输入名称">
</div>
<!--底部-->
<div id="mini_nav" class="nav bt-nav">
  <div>
    <ul>
      <li><a href="#"><span class="ico-home"></span>
          主页
        </a>
      </li>
      <li><a class="selected-menu" href="#"><span class="ico-shop"></span>
          商城
        </a>
      </li>
      <li><a href="#"><span class="ico-service"></span>
          服务
        </a>
      </li>
      <li><a href="#"><span class="ico-me"></span>
          我的
        </a>
      </li>
    </ul>
  </div>
</div>

 $('.search-input').bind('focus',function(){
   $('#mini_nav').css('position','static');
 }).bind('blur',function(){
$('#mini_nav').css({'position':'fixed','bottom':'0'});
});

var wHeight = window.innerHeight; //获取初始可视窗口高度 
window.addEventListener('resize', function(){ //监测窗口大小的变化事件 
  var hh = window.innerHeight; //当前可视窗口高度 
  var viewTop = $(window).scrollTop(); //可视窗口高度顶部距离网页顶部的距离 
  if(wHeight > hh){ //可以作为虚拟键盘弹出事件 
    $(".content").animate({scrollTop:viewTop+100}); //调整可视页面的位置 
    //do something... 
  }else{ //可以作为虚拟键盘关闭事件 
    //$("content").animate({scrollTop:viewTop-100}); 
    $('#mini_nav').css({'position':'fixed','bottom':'0'});//软键盘关闭时改变底部菜单div的position
  } 
  wHeight = hh; 
});