Javascript - position:fixed - 解決 iPhone 無法固定導覽列的問題

CSS 提供了區塊在網頁中固定位置的方法， position:fixed ，無論畫面如何移動，在固定地方始終都能呈現想要呈現的東西。然而在 iOS 裝置中的 Safari 卻無法呈現，蘋果官方網站有提及原因可以參考看看
http://developer.apple.com/library/ios/#technotes/tn2010/tn2262/_index.html

蘋果官方將於 iOS5 做出修正，在之前的使用方法，可以參考 Gmail 部份
http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-css.html

亦或以 iScroll 等提供的技術進行呈現
http://cubiq.org/iscroll

不過想要製作導覽列或是廣告列，最簡單的方法在底下，參考自
http://stackoverflow.com/questions/743123/fixed-positioning-in-mobile-safari

這段 Javascript 可以輕鬆的達到效果

window.onscroll = function() {
document.getElementById('fixedDiv').style.top =
(window.pageYOffset + window.innerHeight - 25) + 'px';
};

CSS部份則需要加上

.fixedDiv {
position:fixed;
}

只要將區塊的名稱設定為 div class="fixedDiv" ，並視需求修改 25 這個數字（數字大上移，數字小下移）即可完成。缺點是必須等待視窗捲動完成後才能正確顯示。 試試看！