Solution to the problem that the bottom menu is topped when input gets focus

The code looks like this:

<div class="search-box">
  <input class="search-input" type="text" placeholder=" Please enter a name ">
</div>
<!-- Bottom -->
<div id="mini_nav" class="nav bt-nav">
  <div>
    <ul>
      <li><a href="#"><span class="ico-home"></span>
           Home page 
        </a>
      </li>
      <li><a class="selected-menu" href="#"><span class="ico-shop"></span>
           Mall 
        </a>
      </li>
      <li><a href="#"><span class="ico-service"></span>
           Services 
        </a>
      </li>
      <li><a href="#"><span class="ico-me"></span>
           Mine 
        </a>
      </li>
    </ul>
  </div>
</div>

When input gets focus, the bottom menu is topped with problem solution:

1. If it is a short page, such as a login page, the login form div at the top will not overlap with the menu div at the bottom (the two div are of the same level). You can set z-index of the login form div to be larger than z-index of the menu div at the bottom, so that after the page is loaded, the two div will not overlap and their hierarchy settings will not be affected. After input gets the focus, the soft keyboard pops up, and the two div overlap. Because z-index with the upper login form div is larger than z-index with the bottom menu div, the bottom menu div will be blocked, that is, the top bottom menu cannot be seen, and the problem will be solved naturally.

Note: z-index does not take effect when the position property value is the default value static.

2. If it is a long page, such as a product display page, the upper product display div will definitely overlap with the bottom menu div, so setting the hierarchy (z-index) will definitely not work. Therefore, js can be used to control the value of position of the bottom menu div:

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

input to get focus, change the bottom menu div position value to static (default, will not break away from the document flow), will be placed to the end of document, will not appear on the soft keyboard, and when input lost focus, and then the bottom menu div position back to fixed, the bottom menu div back to the bottom of the viewport, so the problem is solved.

Here, we have another question. If the soft keyboard is folded by clicking the folding key, input will not lose focus, so the blur event will not be triggered, and position of the bottom menu div will not change back to fixed. Therefore, we can change position of the bottom menu div by capturing the keyboard folding event.

So how to capture the soft keyboard folding event? After searching on the Internet for a long time, I finally found a solution: judging according to the size change of the viewport.

The js code is as follows:

var wHeight = window.innerHeight; // Get the initial visual window height  
window.addEventListener('resize', function(){ // Monitor window size change events  
  var hh = window.innerHeight; // Current visible window height  
  var viewTop = $(window).scrollTop(); // The distance from the top of the visual window height to the top of the web page  
  if(wHeight > hh){ // Can be used as a virtual keyboard pop-up event  
    $(".content").animate({scrollTop:viewTop+100}); // Adjust the position of visual pages  
    //do something... 
  }else{ // Can be used as a virtual keyboard shutdown event  
    //$("content").animate({scrollTop:viewTop-100}); 
    $('#mini_nav').css({'position':'fixed','bottom':'0'});// Change the bottom menu when the soft keyboard is closed div Adj. position
  } 
  wHeight = hh; 
});

OK, complete.

In fact, when the user scrolls the page, input will lose focus and trigger blur event. If the requirements are not particularly strict, this small problem can be ignored.