海外のブログで使われている二段階スクロール式のヘッダーライブラリ「scrollable-layer.js」
scrollable-layer.jsはヘッダーとメニュー部が合体するタイプのスクロールをサポートするJavaScriptライブラリです。
最近のWebサイトでよく使われているのがスクロールしてもヘッダーが追従してくるタイプのデザインです。特に個人的にTechCrunch.comのやり方が面白いと思っていたのですが、同様のヘッダー表示を可能にするのがscrollable-layer.jsです。
デモです。高さが低いのでウィンドウを小さくしています。
下にスクロールします。黒い帯が上にあがっていますが、ヘッダー部は残ったままです。
ヘッダー部にかかりました。ロゴはそのまま残っています。
さらにスクロールしました。ロゴはちょっと上に上がってそのまま残っています。ヘッダーはこのまま固定されます。
scrollable-layer.jsは単にヘッダーを固定にするだけでなく、ある程度スクロールするとヘッダー部を固定にしてくれる仕組みになっています。ヘッダーとメニューとが分離している場合に使えるでしょう。この手のデザインはBootstrapでも実現できますが、scrollable-layer.jsなら依存性なく導入できます。
scrollable-layer.jsはJavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。
MOONGIFTはこう見る
Webサイトにおいてトップ部分は視線の集まる部分だけに慎重にコンテンツが集められます。その割に最近のWebサイトでは縦長になる傾向があるため、ちょっとスクロールさせただけでコンテンツが隠れてしまうのが実情です。ユーザの視点から見ればヘッダー部にメニューを固めるのはあまり有効には見えません。
その代わりにヘッダーを固定にしたり、スクロールを感知して追加コンテンツを表示するような類の試みが多数されています。特にこの手の試みはUSのブログで数多くなされています。よりPVをあげるためのそういった施策を学ぶ上で役立つでしょう。