【ｊQuery】上にピタッと張り付くメニュー「Clingify」

最近ちょっと流行りの、スクロールしていくと画面上部にグローバルメニューが張り付いて消えることなく追従してくれるやつ。（表現が難しい）

LIGさんのサイトが採用していますね。

これを簡単に実現することが出来るらしいプラグインがあるとのことで試してみました。

追従式グローバルメニュー「Clingify」とは

追従式と言うらしいです。
メニューに限らずヘッダー要素なども手軽に固定できるjQueryのプラグインです。

早速実装してみましょう

ファイルのダウンロード

まずは、ファイルをダウンロードします。
画面右側の方の［Download ZIP］のボタンからダウンロードします。

DLサイト→　https://github.com/theroux/clingify

こちら公式サイト→　Clingify

Clingifyサイトのデモページを参考に必要なファイルをアップロード

今回は『clingify.css』と『jquery.clingify.js』を使うようです。
こちらをサーバーへアップロードします。

HTML・CSS・JSの設定

以前記事にしましたWebフォントのデモページを流用します。
Clingifyサイトのデモページや公式サイトは英語ですが、変更箇所がわかりやすく記載されています。

HTML index.html

アップロードした2つのファイルとjQueryファイルの読み込み、JSの指定を記述します。
アップロードした2つのファイルの編集は必要ありません。

CSS

CSSはグローバルメニューの装飾とスクロール用に高さ設定、スクロールがわかりやすいように背景画像を付けました。これらはデモ用の設定なので無くでも大丈夫です。

かっこ悪いのでそれっぽく装飾し直します

CSSの装飾で各メニューの色を統一しborderで仕切り線を、またnavに対する背景色をボタンと同じ色にすることで帯っぽくしてみたいと思います。

CSS

本来であれば各ボタンの色の統一はまとめてすっきりさせることが出来るのですが、あえて元のCSSの色を変更する形にしています。

まとめ

思ったより簡単でした。
既存のWebサイトにも容易に組み込む事が出来ます。

Clingify公式サイトではもっと複雑なオプションによって見せ方を変えているようです。
英語なので理解を深めるには時間がかかりますが、もうちょっと工夫して張り付く前と後で違った表示が出来るようになればと思います。

近々スマホ対応の折りたたみメニューとも組み合わせてみたいと思いました。
それではまた。

この記事を読んだ方はこちらも読まれています

【解決法】Safariではinput要素をCSSの「display: none;」で消すことができない