ちょっと前までヘッダーをスクロールしても上部に残し続けるのが流行っていましたが、最近はさらに最初はヘッダーを大きく表示して、スクロールするとヘッダーサイズを小さくすると言うタイプが多く見られるようになっています。 実装は面倒なイメージがありますが、jquery.cb-slideheader.jsを使えば簡単に実現できます。

jquery.cb-slideheader.jsの使い方

jquery.cb-slideheader.jsにはいくつものメソッドが用意されていますので、それを使うことで多彩な表現が実現します。まずはスクロールするとヘッダーが表示されるもの。

スクロールでヘッダーが変わるもの。

スクロールでヘッダーを非表示に。ただしパララックス風です。

スクロールによってコンテンツを変更するのはパララックスエフェクトをはじめ、最近人気の効果です。jquery.cb-slideheader.jsを使ってよりユーザビリティ高いサイトを目指してください。

jquery.cb-slideheader.jsはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

forked: スクロールするとヘッダーが表示される（index1） - js do it 下にスクロールすると隠れ、上にスクロールすると現れるヘッダー - js do it forked: スクロールするとヘッダーが表示される - js do it maechabin/jquery.cb-slideheader.js