Headhesive - スクロール追従型ヘッダーを実現するJavaScriptライブラリ
SPA（シングルページアプリケーション）の流れもあり、Webサイトがどんどん縦長になっているように見えます。そんな中、一番下までスクロールした後で一番上にあるヘッダーにアクセスしたいと誰が思うでしょうか。 そこで離脱を防げるのがヘッダーバーをスクロール追従型にすることでしょう。使ってみたいのはHeadhesiveです。
Headhesiveの使い方
Headhesiveを使ったデモサイトです。初期表示時です。
スクロールすると、それに合わせて一旦ヘッダーが消えます。そしてその後、ヘッダーの一部だけが表示されます。
実際にアニメーションさせているところです。
あまり激しく動かすとがくっと動く時がありますが、普通にスクロールさせて見ている分には殆ど気になることはないでしょう。単純にヘッダーを残すだけでなく、スクロールの動きに合わせてアニメーションしているところが自然です。
HeadhesiveはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。