_s(Underscores)でヘッダーナビゲーションに凝ってみる
続いて躓いたのは、スクロールした時のヘッダーの動きです。
これは要件ではなく、個人的に実装したくて探しました。
画面をスクロールしてもヘッダーが固定表示され、
かつ、ヘッダーの高さが縮んだり、背景の色や透明度が変わるというもの。
よく見かけるんですが、いつもどうやってるんだろう?って思ってました。
これはプラグインではなく、jQueryとCSSでできたんですね。
参考にさせていただいたのは以下のサイトです。
私が使わせてもらったサンプルは、
「最初から固定表示、特定位置までスクロールでサイズ・色を変える」
でした。
ただ、私はjQuery初心者で配置の仕方がイマイチ分からなかったので、
以下のように、上下に少し付け足して「header-navi.js」というファイル名で保存し、
テーマフォルダ内の「js」フォルダにアップロードしました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<em>jQuery(function($){</em> var _window = $(window), _header = $('.site-header'), heroBottom; _window.on('scroll',function(){ heroBottom = $('.hero').height(); if(_window.scrollTop() > heroBottom){ _header.addClass('transform'); } else{ _header.removeClass('transform'); } }); _window.trigger('scroll'); <em>});</em> |
さらに、上記のjsファイルを読み込むために、
「functions.php」の一番下に以下の記述を追加しています。
1 2 3 4 5 |
function header_navi_script() { wp_enqueue_script( 'header_navi', get_template_directory_uri().'/js/header-navi.js',array(),'' ); } add_action( 'wp_enqueue_scripts', 'header_navi_script' ); |
今となっては何か違う方法があったのでは…と思わなくは無いですが、
とりあえず実現できたので良しとしておきます。