jQueryでスクロールしたとき、スクロールしていたときに表示する

最近、生のjavascriptを書くのが面倒になってきて、ついjQueryを使っています。

画面を表示したときにスクロール後の画面か、スクロールしていたら、sp-navクラスにscrollクラスを付与するコードです。

htmlコード

<header id="header" class="header" itemscope itemtype="https://schema.org/WPHeader"></header>
<div class="sp-nav"></div>
<main class="main" itemscope itemtype="https://schema.org/WebSite"></main>
<footer class="footer"></footer>

jQuery

// headerの高さを調べる
const headerHeight = $('#header').outerHeight(true);

// 関数を作成して、スクロールの処理をまとめる
const handleScroll = () => {
　　// 現在地を調べる
  const scroll = $(window).scrollTop();
  if (scroll >= headerHeight) {
    $('.sp-nav__line').addClass('scroll');
  } else {
    $('.sp-nav__line').removeClass('scroll');
  }
};

// 初期表示時にも実行する
$(document).ready(() => {
  handleScroll();
});

// スクロール時にも実行する
$(window).scroll(handleScroll);

アロー関数で書いています。

従来の関数の場合

// headerの高さを調べる
const headerHeight = $('#header').outerHeight(true);

// 関数を作成して、スクロールの処理をまとめる
function handleScroll() {
  　　// 現在地を調べる
  const scroll = $(window).scrollTop();
  if (scroll >= headerHeight) {
    $('.sp-nav__line').addClass('scroll');
  } else {
    $('.sp-nav__line').removeClass('scroll');
  }
}

// 初期表示時にも実行する
$(document).ready(function () {
  handleScroll();
});

// スクロール時にも実行する
$(window).scroll(handleScroll);

さらに、これでもいける。というかこっちの方が実用的かと。

$(document).ready(() => {
// headerの高さを調べる
  const headerHeight = $('#header').outerHeight(true);
// 関数を作成して、スクロールの処理をまとめる
  const handleScroll = () => {
  // 現在地を調べる
    const scroll = $(window).scrollTop();
    if (scroll >= headerHeight) {
      $('.sp-nav__line').addClass('scroll');
    } else {
      $('.sp-nav__line').removeClass('scroll');
    }
  };

  // 初期表示時に実行する
  handleScroll();

  // スクロール時に実行する
  $(window).scroll(handleScroll);
})