スクロールイベント活用術：メインビジュアルを過ぎたらサイドナビを表示するjQueryテクニック

by interlife

HTML

<section id="kv-area">
  <h1>メインビジュアル</h1>
</section>
<section id="contents-area">
  <h1>コンテンツエリア</h1>
</section>
<div class="side-nav">
  <p>サイドナビ</p>
</div>

SCSS

#kv-area,#contents-area {
  padding: 200px 0;
  background: #ccc;
  h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
  }
}

#contents-area { background: #f3f8fc; }

.side-nav {
  padding: 10px;
  width: 125px;
  text-align: center;
  background: #fff;
  position: fixed;
  right: 0;
  top: 20px;
  z-index: 1;
  box-shadow: 0 0 35px 0 rgba(0, 0, 0, .1);
  border-radius: 10px 0 0 10px;
  line-height: 1.2;
  font-weight: bold;
  overflow: hidden;
  opacity: 0;
  transition: .3s;
}

JavaScript

//サイドナビをKVを過ぎてから表示
$(function () {
  // ウィンドウのスクロール量を保持する変数
  let start_position = 0,
    window_position;
  // サイドナビ要素を取得
  const sideNav = $(".side-nav");
  // 最初のsection要素の高さを取得
  const firstSectionHeight = $("section").outerHeight();
  // スクロールイベントを設定
  $(window).scroll(function () {
    // 現在のウィンドウのスクロール量を取得
    window_position = $(window).scrollTop();
    // 最初のsection要素を過ぎたらサイドナビ表示
    if (window_position >= firstSectionHeight) {
      sideNav.css("opacity", "1");
    } else {
      // 最初のsection要素を過ぎるまではサイドナビ非表示
      sideNav.css("opacity", "0");
    }
    // 現在の位置を更新
    start_position = window_position;
  });
  // ページ読み込み時に中途半端な位置でロードされたときでも正しくヘッダーの表示を設定するためにスクロールイベントを発生させる
  $(window).trigger("scroll");
});