【jQuery】ヘッダーメニューを特定の位置に来たら表示する。初期は非表示です。

jQuery

こんにちは、ダイキです。
今回は jQuery を使用して、ヘッダーがある特定の位置に到達したら、非表示から表示に切り替わるように書いていきます。
よくあるのは、特定の付近に来たらイベントが発生する。というような、フェードイン・フェードアウトはありますね。
今回のポイントとしては、要素の高さを取得し、その要素がスクロールで表示されなくなったら処理する。というものにしています。
そうすることで、レスポンシブ時の高さなどを関係なく、イベントを発生させることが出来ます。
※長くなるので細かい部分は省いています。

HTMLです。ヘッダーメニューを特定の位置に来たら表示する。初期は非表示です。


<header id="header" class="header">
  <div class="d-flex">
    <div class="box">
      <h1><a href="#">FA EXHIBITION</a></h1>
    </div>
    <div class="box">
      <div class="openbtn"><span></span><span></span><span></span></div>
      <nav id="g-nav">
        <div id="g-nav-list">
          <!--ナビの数が増えた場合縦スクロールするためのdiv※不要なら削除-->
          <ul>
            <li><a href="#">TOP</a></li>
            <li><a href="#">INFORMATION</a></li>
            <li><a href="#">GALLERY</a></li>
            <li><a href="#">ACCESS</a></li>
            <li><a href="#">CONTACT</a></li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</header>

<div id="mv" class="mv">
  <div class="d-flex">
    <figure class="img_wrap"><img src="img/feature1.jpg" alt="img"></figure>
    <figure class="img_wrap"><img src="img/feature1.jpg" alt="img"></figure>
    <figure class="img_wrap"><img src="img/feature1.jpg" alt="img"></figure>
  </div>
</div><!-- mv -->

CSSです。ヘッダーメニューを特定の位置に来たら表示する。初期は非表示です。


.header {
  position: fixed;
  z-index: 100;
  width: 100%;
  opacity: 0;
  transition: opacity .5s;
}

.header.show {
  opacity: 1;
}

JavaScriptです。ヘッダーメニューを特定の位置に来たら表示する。初期は非表示です。


// ヘッダースクロール ------------------------

//スクロールすると上部に固定させるための設定を関数でまとめる
function FixedAnime() {
  let headerH = $('#mv').outerHeight(true);
  let scroll = $(window).scrollTop();
  if (scroll >= headerH){//headerの高さ以上になったら
    $('#header').addClass('show');//showというクラス名を付与
  } else {//それ以外は
    $('#header').removeClass('show');//showというクラス名を除去
  }
}

// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
  FixedAnime();/* スクロール途中からヘッダーを出現させる関数を呼ぶ*/
});

// ページが読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
  FixedAnime();/* スクロール途中からヘッダーを出現させる関数を呼ぶ*/
});