タイトルの下にグルーバルナビがあるデザインで、画面するクールした際にタイトルはスクロールで消えるけどグローバルナビは画面上部に固定され常時表示されるアレがやりたくて調べてみました。
いろいろ方法はあるようですが、jqueryのプラグイン「Clingify」を利用するとカンタンに実装できそうだったのでそちらを採用しました。
参考にしたのはこちらの記事です。
スクロール追従型のグローバルメニューを簡単に実装できる「Clingify」の使い方（寝ログ）
ちなみに、WordPressのプラグイン「Simplicity2」で利用するケースとして記載します。どのテーマでも応用可能と思います。
Clingifyのダウンロード
/clingifyからダウンロードします。
ダウンロードしたzipファイルを解凍します。
使うのは下記の2ファイルです。
- clingify.css
- jquery.clingify.js
それぞれ、テーマフォルダ内に「css」「js」フォルダを作成してコピーします。
- テーマフォルダ/css/clingify.css
- テーマフォルダ/js/jquery.clingify.js
Clingify用のCSSの読み込み
つづいて先ほとのclingify.cssの読み込むようにします。
「simplicity2」の子テーマの場合だとheader-insert.phpの最後に下記のコードを追記します。
|
1 |
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/clingify.css" /> |
どこに書いてもいいんだけど、中途半端なところに書いて<?php〜?>の間に書かないように、最後の行に書いたほうがいいです。
フッターでjsファイルを読込&実行コード
つづいてjquery.clingify.jsの読み込みと、動作するためのコードを記載します。
「simplicity2」の子テーマの場合だとfooter-insert.phpの最後に下記のコードを追記します。
|
1 2 3 4 5 6 |
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.clingify.js"></script> <script type="text/javascript"> jQuery(function() { jQuery('#navi').clingify(); }); </script> |
動作確認
実際に動作を確認してみましょう。
その際、WordPressにログインしていると、WordPressのツールバーに隠れてグローバルナビが確認できない場合がありるので、WordPressからはログアウトして確認したほうがいいかも。
とまあ、こんな感じで「Clingify」を利用するとすごくカンタンにグローバルナビの固定が実装せきました。