標籤：
轉載自：http://www.ithao123.cn/content-649841.html
移動端開發仿app頭部底部固定設定position:fixed，android2.2以上已經實現。但是在ios8以下系統，當小鍵盤啟用時，都會出現位置浮動問題。
如何解決：
查閱資料之後想到一下幾種解決方案
1，使用position：absolute類比
<script type="text/javascript">
window.onscroll=function(){
$(".fixed").css("top",$(window).scrollTop());
$(".foot").css("top",$(window).scrollTop()+$(window).height());
}
</script>
問題來了：滑動頁面時頭部底部div會有明顯的抖動。
2，判斷當前獲得焦點元素是input則隱藏div改為position：absolute
<body onload=setInterval("a()",500)>
<script type="text/javascript">
function a(){
if(document.activeElement.tagName == ‘INPUT‘){
$(".fixed").css({‘position‘: ‘absolute‘,‘top‘:‘0‘});
} else {
$(".fixed").css(‘position‘, ‘fixed‘);
}
}
</script>
問題來了:不停監控dom，消耗資源。如果input個數較少，可在input裡面添加onfocus事件好一些。但是如果是底部固定div此方法好像不太給力。
3，外掛程式iscroll.js個人感覺不是很好用。可能方法不對，jQuery Mobile 沒嘗試，感覺會增負擔。
4，重點來了：
只需要在中間部分外層div添加css樣式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以實現效果，無需外掛程式。可拷貝下面代碼運行。
<!DOCTYPE html> <html lang="zh_cmn"> <head> <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> </head> <body> <header class="head">頂部固定地區</header> <article class="main" id="wrapper"> <div> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <p>當內容欲出隱藏時，灰色地區可上下拖動</p> <p>當內容欲出隱藏時，灰色地區可上下拖動</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">底部固定地區</footer> </body> </html>
小技巧css解決移動端ios不相容position:fixed屬性，無需外掛程式
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
