ヘッダをユーザーのスクロール操作に合わせて表示・非表示するスクリプトを紹介します。スクロールのダウン・アップでclassを付与するので、ヘッダに限らず他にもいろいろと使えそうです。スクリプトは単体で動作しますが、jQuery/ZeptoやAngularJSのプラグインとしても動作します。-GitHubHeadroom.jsのデモHeadroom.jsの使い方Headroom.jsのデモまずは、シンプルなデモから。スクリプトのページ自体に組み込まれています。Headroom.js下にスクロールすると、ヘッダが上部に吸い込まれます。消えたヘッダは、上にスクロールするとどのポジションからでも表示されます。この「どのポジションからでも」というのがこのスクリプトの便利なところです。スクリプトにはさまざまなオプションが用意されており、デモページで楽しめます。デザインは似ていますが、こちらは「Playroom」です。デモページヘッダの非表示・表示のタイミングが細かく設定でき、アニメーションのエフェクトも吸い込まれるだけでなく、ぱたっとなったり、くるっとなったり、バウンドしたりします。外部ファイル当スクリプトを外部ファイルとして記述します。src="js/headroom.js"></script>jQuery、Zepto、AngularJSのプラグインとして利用することもできます。それぞれ用のスクリプトが用意されています。HTMLHTMLは特にありません。対象となる要素を用意するだけです。スクリプトを実行すると対象要素に「class="headroom"」を付与します。このclassはスクロールのダウン時・アップ時に変更されます。JavaScriptまずは、他のスクリプト無しで実装した場合から。対象となるエレメントを指定し、スクリプトを実行します。jQuery/Zeptoを使用する場合は、記述はもっとシンプルになります。$("#header").headroom();オプションでは表示・非表示のタイミングやエフェクトを設定できます。