縦長のWebサイトに。ヘッダー固定化ライブラリ

スマートフォンなど画面が小さい場合、Webサイトはどうしても縦長になりがちです。そしてスクロールを下まで行い、別なページに移ろうと思うと今度は上までスクロールし続けないといけません。これは非常にストレスです。

そこで使ってみたいのがヘッダー部分を固定表示してくれるライブラリです。ヘッダー情報へのアクセスがしやすくなるのでユーザビリティが高くなるでしょう。

simple-sticky-header

以下のようなシンプルなコードでヘッダー固定化を実現します。デザインがスクロール時には変更されます。

cara-tm/simple-sticky-header: Very simple javascript & CSS fixed header on scroll down based on an element’s height.

AnimatedHeader

スクロールするとヘッダーが小さくなるアニメーションとともに固定化されます。若干実装が複雑になっています。

codrops/AnimatedHeader: A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.

partly-fixed-header

ヘッダーではなく広告を常時表示するのを想定して作られています。とは言えメニューなどに変更して使うこともできるはずです。

skimmet/header: A head that is only fixed when scrolled past the banner.

aheader

上にスクロールする際にヘッダーを表示するというタイプのライブラリです。ユーザが下までコンテンツを見た後、上に戻る操作をしたタイミングでヘッダー情報が出せます。

Peleg/aheader: Fixed header on scrolling up

こうしたライブラリを使うと画面上の一部分は常に情報が表示され、そこを使えなくなってしまいます。画面が十分に大きい場合はいいですが、4インチくらいの画面サイズであまり大きなヘッダーは却って邪魔になってしまう可能性があります。小さくユーザビリティを損なわないライブラリを選ぶか、二段階くらいのサイズ変化に対応しているものを選ぶと良いでしょう。