不過從ios5.1以來，fixed定位就已經支持了，但很遺憾，ios現在對它還只是半支持。
但是在某些情況下，會出現一些比較奇葩的問題，比如fixed元素中存在輸入框子元素，這個時候就會跪了。
可以看到，fixed定位的元素跑到中間去了，這種問題一般出現在頁面有scrollTop並且輸入框獲得了焦點的情況下！
怎么解決這種問題呢？我目前知道的主要有三種辦法，假設HTML代碼結構為：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>fixed</title> <style> header { position: fixed; } </style> </head> <body> <header><input type="search" placeholder="請輸入搜索詞" /></header> <div id="container"></div> </body> </html>
方法一
在輸入框獲得焦點時，將fixed改成absolute，並將top值設置為頁面此時的scrollTop，然后在輸入框失去焦點時，改回fixed。
function onFocus(e) {
this.main.style.position = 'absolute';
this.main.style.top = document.body.scrollTop + 'px';
}
function onBlur(e) {
this.main.style.position = 'fixed';
this.main.style.top = 0;
}
此外我們還得做一些額外的處理，比如禁止頁面滾動，為啥要禁止滾動？
因為軟鍵盤彈起的時候，用戶還是可以滾動頁面的，一旦用戶往下滾動了頁面，header也隨着往下滾動了（因為此時它是absolute的）。
function onTouchMove(e) {
e.preventDefault();
e.stopPropagation();
};
function onFocus(e) {
this.main.style.position = 'absolute';
this.main.style.top = document.body.scrollTop + 'px';
document.body.addEventListener('touchmove', onTouchMove, false);
}
function onBlur(e) {
this.main.style.position = 'fixed';
this.main.style.top = 0;
document.body.removeEventListener('touchmove', onTouchMove);
}
這種方法基本能解決大部分需求，但是在輸入框有搜索提示的時候也會掛，因為我們禁止了滾動，而搜索提示通常應該要能往下滾動。
方法二
在輸入框的touchstart事件發生時，將fixed元素改成static，然后再將焦點focus到輸入框中，然后輸入框blur時，再將其設置成fixed:
input.addEventListener('touchstart', function(e) {
main.style.position = 'static';
input.focus();
e.preventDefault();
}, false);
input.addEventListener('blur', function(e) {
main.style.position = 'fixed';
}, false);
這種方案的原理就是先將fixed元素改成static，這樣該元素就會回到頁面頂部（正常流），
然后調用輸入框的focus方法，將焦點移到輸入框中，此時頁面視角也會跳到頂部。
Note: 優酷無線首頁現在就是這么做的。
方法三
這種方案是將header和container都設置成absolute，然后只滾動container。
這種的方法主要依賴ios5.1以后提供的-webkit-overflow-scrollingcss屬性。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>fixed</title> <style> header { position: aboluste; height: 45px; width: 100%; } #container { position: absolute; top: 45px; bottom: 0; width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } </style> </head> <body> <header><input type="search" placeholder="請輸入搜索詞" /></header> <div id="container"> ... </div> </body> </html>
這種方案也有坑，主要表現在：當軟鍵盤彈起時，用戶一旦滾動界面，整個文檔都會滾動（包括header、container），fixed的效果就沒有了。
還有一個更深的坑就是，在軟鍵盤彈起的時候，往上滾動頁面，header此時也會隨着往上滾，
然后收起軟鍵盤，container居然滾動不了（手指多移動幾次后，才能正常滾動）。
Note: 這個問題不知道什么原因，以后有發現再更新本文。
綜上，我還是喜歡使用第二種方案。
蘋果手機里微信不支持position:fixed；
怎么解決：搜索網絡，看其他產品是怎么實現的；
解決鏈接：http://hushicai.com/2014/08/19/ios-fixed-ding-wei-wen-ti.html。
http://blog.csdn.net/liu__hua/article/details/40106595使用方法4。