Mobile development Imitation app head bottom fixed setting position:fixed,android2.2 above has been implemented. However, when the keypad is active, the position floating problem occurs in the iOS8 system below.
How to resolve:
Look up the data and think of several solutions
1, using Position:absolute simulation
<script type= "Text/javascript" >
Window.onscroll=function () {
$ (". Fixed"). CSS ("Top", $ (window). scrolltop ());
$ (". Foot"). CSS ("Top", $ (window). scrolltop () +$ (window). Height ());
}
</script>
Here's the problem: there's a noticeable jitter in the bottom div of the head when sliding the page.
2, judging the current get focus element is input then hide Div changed to Position:absolute
<body Onload=setinterval ("A ()", $) >
<script type= "Text/javascript" >
function A () {
if (Document.activeElement.tagName = = ' INPUT ') {
$ (". Fixed"). css ({' position ': ' absolute ', ' top ': ' 0 '});
} else {
$ (". Fixed"). CSS (' position ', ' fixed ');
}
}
</script>
Here's the problem: constantly monitoring the DOM and consuming resources. If the input number is small, you can add the onfocus event in input to better. But if it's a bottom-pinned Div, this method doesn't seem to give much force.
3, plugin Iscroll.js personal feeling is not very useful. Probably not, JQuery Mobile didn't try, and it felt like a burden.
4, the focus has come:
Just add CSS style position:fixed;top:50px to the middle part of the outer div; Bottom:50px;overflow:scroll, you can achieve results without plugins. You can copy the following code to run.
<! DOCTYPE html>
<meta charset=utf-8/>
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1"/>
<meta name= "viewport" content= "Width=device-width, User-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0 "/>
<title></title>
<style>
. Head,.foot{position:fixed;left:0;height:38px;line-height:38px;width:100%;background-color: #99CC00;}
. head{top:0;}
. foot{bottom:0;}
. Main{position:fixed;top:38px;bottom:38px;width:100%;overflow:scroll;background-color: #BABABA;}
</style>
<body>
<article class= "main" id= "wrapper" >
<div>
<p> when content is hidden, the gray area can be dragged up or down </p>
<p> when content is hidden, the gray area can be dragged up or down </p>
<p> when content is hidden, the gray area can be dragged up or down </p>
<p> when content is hidden, the gray area can be dragged up or down </p>
<p> when content is hidden, the gray area can be dragged up or down </p>
<p> when content is hidden, the gray area can be dragged up or down </p>
<p> when content is hidden, the gray area can be dragged up or down </p>
<p> when content is hidden, the gray area can be dragged up or down </p>
<p> when content is hidden, the gray area can be dragged up or down </p>
<p> when content is hidden, the gray area can be dragged up or down </p>
<p> when content is hidden, the gray area can be dragged up or down </p>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
<input type= "text" value= "" class= "Inputtext" > <br>
Content <br>
Content <br>
Content <br>
Content <br>
Content <br>
Content <br>
Content <br>
Content <br>
Content <br>
</div>
</article>
<footer class= "Foot" > Bottom fixed area </footer>
</body>
When the keypad appears, the head and bottom automatically jump to the top and bottom of the page. When the keyboard is hidden, it is fastened to the head and bottom. Suddenly I feel cheerful.
Little tricks CSS to address mobile iOS incompatible position:fixed properties without plugins
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
