【STINGER PLUS②】スクロールした時にナビゲーションを固定する方法

作成日 

更新日  2017/01/23

  • このエントリーをはてなブックマークに追加

 - WEBデザイナー

こんにちは!Tamakoです。

今回はSTINGER PLUSのカスタマイズ第2弾!

画面をスクロールした時にナビゲーションを固定する方法を紹介します。(PC版のみ)

文章が長文になった時とか便利ですよ~。

DEMOはこちら
※旦那さんにDEMO作ってといったら、かなりぶっ飛んだサイトになりました(汗

あと今回も管理画面から簡単に設定ができる子テーマを用意しました。

1番下までにいくと、ダウンロードリンクがあります。

【STINGER PLUS】スクロールした時にナビゲーションを固定する場合の作業手順

「スクロールによりメニューが見えなくなるタイミングでCSSを効かせる」方法で実現します。
これにはPHP、jQuery、CSSを使います。

※jQueryは事前にライブラリを読み込んでおく必要がありますが、
STINGER PLUSではhead部分で読み込む設定になっていますので設定不要です。

1.グローバルメニューへcssを効かせるIDを指定する。
2.cssを効かせるためにjavascriptを<head></head>の間に記載する。
3.メニューを固定するcssをstyle.cssへ記載する。

1.グローバルメニューへcssを効かせるIDを指定する。

グローバルメニューにID「#nav_fixed_tmk 」を追加してstyleを効かせます。
「st-header-menu.php」で設定されているため、下記の箇所へcontainer_idを追加してIDを記載します。

※「st-header-menu.php」はソースコードが記載されている箇所なのですが、header.phpがst-header-image.phpを読み込み、st-header-image.phpがst-header-menu.phpを読み込んでいます。
「header.php → st-header-image.php → st-header-menu.php」
子テーマで運用する場合は親テーマから、この3つのファイルをコピペしておく必要があります。

2.cssを効かせるためにjavascriptを<head></head>の間に記載する。

下記コードを<head></head>の間に記載します。
わからない場合は</head>の直前に記載するとよいです。

※ご指摘があり9/7に修正しました。(ににこさんありがとうございます)

3.メニューを固定するcssをstyle.cssへ記載する。

モバイル・タブレットの場合はハンバーガーメニューとなるためPCサイズの箇所へ追記をします。
わからない場合は下記のソースをstyle.cssの最後に追記してください。

管理メニューから操作できるように設定する

通常は1~3の手順でメニューが固定される設定になりますが、管理画面でメニューを追加できるように、function.phpへ記載するソースを作成しました。

ただこの場合はjavascriptの部分をst-headmenu-tmk.jsというファイルで別ファイルを作成して、そのファイルをjsフォルダへ配置してやる必要があります。

■function.phpへ追記するコード

■header.phpの<head></head>の間に記載するコード

管理画面でヘッダーメニューを固定するにチェックを入れたらjsが読み込まれるようになります。

管理画面から変更できる子テーマを用意しました

javascriptとかちょっと面倒な人のために、「STINGER PLUS+」の子テーマにコードを加えた、派生の子テーマを用意いたしました。

stingerplus-child-tmk

※必ずバックアップを取っていて自己責任でお願いします。

(機能としては上記のソースコードを記載しているものと同じなのですが、管理しやすいように別ファイルにして読み込む形をとっています。その為、上記とは多少コードが違います。)

stingerplus-child-tmkの導入方法は「stingerplus-child-tmkの導入方法」を参考にしてくださいね。

スクロールした時にナビゲーションを固定する方法・まとめ

こういうの使う人いるのかなぁ~と思ったりもするのですが、せっかくなので公開してみました。

「STINGER PLUSのこういうカスタマイズが知りたい!」などご要望がありましたら、教えてください。

積極的に書いてみたいと思います。

それにしてもやっぱすごいな、STINGER!

この記事が気に入ったら
いいね!しよう

Twitter で