CSS-свойство position:fixed в Mobile Safari сносно работает начиная c iOS 5. В Android родной браузер частично понимает это свойство начиная с версии системы 2.1, адекватно — с 2.2, полная поддержка — с 3.0. Подробнее: таблица поддержки position:fixed.
HTML:
<div id="topbar">Fixed Title</div>
<div id="content">
<h2>Start</h2>
<p>Main content text </p>
...
<p>Main content text </p>
<h2>End</h2>
</div>
<div id="bottombar">Fixed footer</div>
CSS:
#content{
padding: 50px 0; /* отбиваем высоту баров, чтобы не перекрывать контент вверху и внизу страницы */
}
#topbar,
#bottombar {
position: fixed;
left: 0;
width:100%;
height: 50px; /* фиксируем высоту для простоты */
line-height:50px;
background:#eee;
text-align: center;
}
#topbar {top: 0;}
#bottombar {bottom: 0;}
Теперь в современных смартах у нас topbar и bottombar «прибиты» соответственно к верху и к низу окна. Проблема позицонирования при первом скролле в iOS решается мини-Javacript'ом:
window.scrollBy(0);
