_s(Underscores)でヘッダーナビゲーションに凝ってみる

続いて躓いたのは、スクロールした時のヘッダーの動きです。

 

これは要件ではなく、個人的に実装したくて探しました。

画面をスクロールしてもヘッダーが固定表示され、

かつ、ヘッダーの高さが縮んだり、背景の色や透明度が変わるというもの。

 

よく見かけるんですが、いつもどうやってるんだろう?って思ってました。

これはプラグインではなく、jQueryとCSSでできたんですね。

参考にさせていただいたのは以下のサイトです。

 

ヘッダー・ナビゲーションを固定表示させるアイデア5つ

 

私が使わせてもらったサンプルは、

「最初から固定表示、特定位置までスクロールでサイズ・色を変える」

でした。

 

ただ、私はjQuery初心者で配置の仕方がイマイチ分からなかったので、

以下のように、上下に少し付け足して「header-navi.js」というファイル名で保存し、

テーマフォルダ内の「js」フォルダにアップロードしました。

 

さらに、上記のjsファイルを読み込むために、

「functions.php」の一番下に以下の記述を追加しています。

 

今となっては何か違う方法があったのでは…と思わなくは無いですが、

とりあえず実現できたので良しとしておきます。

 

 

シェアする

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


コメントする