スマホサイトで使いたいjQueryプラグイン

UPDATE：2016.9.6

CATEGORY: ホームページのこと

こんにちは、アプリコットデザインのざっきーです。

今回はスマホサイトでよく見かけるスクロールするとスライドして現れるヘッダー機能を実装するためのプラグインを紹介したいと思います。

jquery.cb-slideheader.js

スマホサイトを開いたときファーストビューの時点ではデザイン上、ある程度ヘッダーの高さが欲しいけれど下に読み進めていくと固定ヘッダーの高さが気になってしまうことってありますよね。
jquery.cb-slideheader.jsはそんな時に簡単に実装できて調整ができるjQueryプラグインなんです。
プラグインはGitHubからダウンロードできます。

このプラグインの使いやすい点としてはヘッダーの表示/非表示に関するオプションとスタイルやアニメーションオプションの充実があげられるでしょうか。

プラグインのオプションにboxShadowやopacityなどが用意されているためスライド後に出現するヘッダーのデザイン調整に非常に役立ちます。CSSと同様の記述で調整できるとのことなので非常に扱いやすいです。
あと、まだ試してはいないのですがコールバック関数も使えるため、スライドしたら特定の要素をアニメーションさせるといったことも可能なようです。奥が深い！
動作も軽く、オプションも充実しているのでお試しください。