ヘッダーによって表示領域が狭まってしまうのを嫌う方にお勧めです。 最近のWebデザインではヘッダー部分を画面上部に常に表示するのが一般的になってきています。いつでもヘッダーにアクセスできて便利な反面、そのために表示領域が限られてしまうという点においてちょっとした不便さを感じます。 そこでiPhoneにおいては最近はヘッダーやフッターを普段は隠しておいて、上にスクロールしようとしたタイミングで表示させるというスタイルを導入しています。同様の仕組みをWebブラウザでも実現するのがHeadroom.jsです。 実際に使ってみます。まずはトップを表示した瞬間は以下のように表示されます。 画像だと分かりづらいと思うので動画でご覧ください。

// 単独の場合
var headroom  = new Headroom(document.querySelector("header"));
headroom.init();

// jQuery/Zeptoを使った場合
$("header").headroom();

// data-*を使った場合
<header data-headroom>

上にスクロールするとヘッダーが出てくるのが分かるかと思います。iOS 7風で面白くて、かつ実用的ではないでしょうか。 なおHeadroom.jsはスマートフォン（iOS）でも問題なくスムーズ、という訳ではないですがちゃんと動きます。ハイブリッドアプリでも取り入れられる可能性があるのではないでしょうか。 Headroom.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Headroom.js WickyNilliams/headroom.js