Solve the problem that the bottom menu is top when the input gets the focus, and the input is top

Solve the problem that the bottom menu is top when the input gets the focus, and the input is top

1 <div class = "search-box"> 2 3 <input class = "search-input" type = "text" placeholder = "enter a name"> 4 </div> 5 <! -- Bottom --> 6 <div id = "mini_nav" class = "nav bt-nav"> 7 <div> 8 <ul> 9 <li> <a href = "#"> <span class = "ico-home"> </span> 10 homepage 11 </a> 12 </li> 13 <li> <a class = "selected-menu" href = "#"> <span class = "ico-shop"> </span> 14 mall 15 </a> 16 </li> 17 <li> <a href = "#"> <span class = "ico-service"> </span> 18 services 19 </a> 20 </li> 21 <li> <a href = "# "> <span class =" ico-me "> </span> 22 My 23 </a> 24 </li> 25 </ul> 26 </div> 27 </div>

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

1. for short pages, such as logon pages, the upper logon form div does not overlap with the bottom menu div (the two divs are of the same level ), you can set the z-index of the logon form div to be greater than the z-index of the bottom menu div, so that after the page is loaded, the two divs will not overlap, and their hierarchical settings will not be affected. After the input gets the focus, the soft keyboard pops up, and the two divs overlap, because the upper logon form div's z-index is set to be greater than the lower menu div's z-index, therefore, the bottom menu div is blocked, that is, the top menu is invisible, and the problem is solved.

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, then setting the level (z-index) will certainly not work, so, you can use js to control the position value of the bottom menu div to solve the problem:

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

Note: When the input gets the focus, the position value of the div in the bottom menu is changed to static (the default value is not separated from the document Stream), which will be placed at the end of the document and will not appear on the soft keyboard, when the input loses the focus, change the position of the bottom menu div back to fixed, and the bottom menu div back to the bottom of the view. This solves the problem.

Here, we have another question. If the keyboard is collapsed by clicking the collapse key, the input won't lose the focus, so the blur event won't be triggered, and the position of the bottom menu div won't be changed back to fixed, therefore, we can capture the keyboard collapse event to change the position of the bottom menu div.
So how can we capture the keyboard collapse event? After searching on the Internet for a long time, I finally found a solution: Based on the Size Change of the view.
The js Code is as follows:

1 var wHeight = window. innerHeight; // get the initial visible window height 2 window. addEventListener ('resize', function () {// event for monitoring window size changes 3 var hh = window. innerHeight; // current visible window height 4 var viewTop = $ (window ). scrollTop (); // The distance between the top of the visible window and the top of the page is 5 if (wHeight> hh) {// event 6 $ (". content "). animate ({scrollTop: viewTop + 100}); // adjust the position of the visible page 7 // do something... 8} else {// can be used as a virtual keyboard to Close event 9 // $ ("content "). animate ({scrollTop: viewTop-100}); 10 values ('{mini_nav'}.css ({'position': 'fixed', 'bottom ': '0 '}); // when the keypad is disabled, change the bottom menu div's position11} 12 wHeight = hh; 13 });

OK.

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