Keep-in-Viewはヘッダーやフッターを常に画面上部(または下部)に表示し続けるjQueryライブラリです。

最近のWebサイトではヘッダーがスクロールしても常に表示され続けるUIが人気です。同様にフッターも表示し続ける、そんなjQueryプラグインがKeep-in-Viewです。


最初の表示です。ヘッダーとフッターに注目です。


一番下までスクロールしました。ヘッダーが残っています。


途中までのスクロールの場合は普通に上に上がっていきます。


表示されない状態までいくと自動的に上に張り付きます。フッターは常に下にあります。

Keep-in-ViewではオフセットやCSSのz-indexがオプションとして指定できます。

Keep-in-ViewはJavaScript/jQuery製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)になります。

MOONGIFTはこう見る

ブログやニュースサイトなど、コンテンツが縦長になる傾向があります。そんな時にヘッダーにあるメニューをスクロールしてクリックするのは非常に面倒に感じてしまうことでしょう。スクロールに追従していれば移動範囲は少なくて済みます。ユーザビリティが向上するはずです。

この手の操作は海外のブログサイトで多く見られるようになってきました。それ以外にもGmailのUIでも採用されています。大手が使っていればユーザも慣れている可能性が高いので安心して利用できるはずです。ユーザのストレスを軽減し、回遊率を高める便利なライブラリです。

dutchcelt/Keep-in-View - GitHub