[WordPress] スクロールでナビ固定。高さを変える。

良く見かけるナビゲーションだと思いますが、スクロールするとナビゲーションがページの上部に固定(flex-top)され、ナビゲーションの高さが少し狭まる。というカスタマイズです。”[Bootstrap 4] メニューをTopに固定する ” のカスタム版といった感じです。何とか出来たので共有します。

スクロールすると、↓の様に、背景が半透明になり、高さが狭くなります。

前提として

基本的には、どんな状況でも実装可能なのですが、私の場合　下記の状態で行いました。

• wordpressを使用
• WP Bootstrap Starterフレームワーク使用

準備

headerテンプレートに、jQuaryファイルとjsファイルをリンクします。

WP Bootstrap Starterのchildテーマ内に[js]フォルダを作り（名前は任意）、中にorigin.jsファイル(名前は任意です）を作ります。Child テーマについては、[wordpress]簡単！子テーマ作成 Child Theme Configurator　に書きました。ご参照下さい。

それらを、親のWP Bootstrap Starterテーマ内にあるheaderテンプレートをChild 内にコピーして、そこにリンクします。

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><br><script src="<?php echo get_stylesheet_directory_uri() ?>/js/origin.js"></script>

※ リンクは</header>より上に書くのがお約束です。

構造

htmlは、この様な感じになっています。

<header><br><nav><br><ul><br><li>・・・・</li><br><li>・・・・</li><br></ul><br></nav><br></header>

jsを書く

先程作成したorigin.jsにコードを書きます。

$(function() {
  var $win = $(window),
      $nav = $('nav'),
      animationClass = 'is-animation';

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > 100 ) {
      $nav.addClass(animationClass);
    } else {
      $nav.removeClass(animationClass);
    }
  });
});

スクロールした時に、navにanimationClass　をclassとして付け、スクロールを戻す（Topに戻る）とそのclassは消える様になっています。つまり、CSSで.animationClassにしたい事を書けば、スクロールした時にだけ、その様になると言う訳です。

CSSを書く

今回は、WP Bootstrap Starterフレームワークの、紫色のナビゲーションを白くして、スクロールした際、その白を透過させ、ページ上部に固定する際、ナビゲーションの高さを、アニメーションでスムーズに低くしようと思います。

header#masthead {	
  background-color:rgba(255,255,254,0.9);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  transition: .4s;
}
nav{margin-top:10px;margin-bottom:10px;}

.is-animation {
margin-top:0;margin-bottom:0;
transition: .4s;
}

上下のmarginを先程のjsで設定した様に、値を10pxにしたり0pxにしたりする事で高さを調整しています。transitionはスムーズに高さを変える為の設定です。

#mastheadは、WP Bootstrap Starterフレームワークで使用されている idです。

コンテンツがナビゲーションと重なる場合は、bodyの高さを足します。

body { 
    padding-top: 4.5rem;
}