jQuery 下からのスクロール量を取得してイベントを発火させる

2023/06/17

awayuki

音大出身。学生時代はフリーランスでWEB制作・開発しながら、2社で長期エンジニアインターンを経験しました(2年半)。 23卒で、自社開発ベンチャー企業に入社しエンジニア・デザイナーとして働き、2024年2月、起業しました！このブログでは、ブログ開設方法・プログラミング・音大からエンジニアになれた方法など書いています。お仕事依頼はお問い合わせフォームからお問い合わせお願いします。 Zenn

「jQueryで上からのスクロール量に応じてイベントを発火する処理」はよく記事で出てきますが、

その逆の「下からのスクロール量を計測してイベントを発火する」に関してあまり記事がなかったので、需要あるかなと思って記述します〜

結論

今回は

フッターが見えたあたりで固定のCTAボタンを消す
フッターより上にスクロールすると再度ボタンを表示する

という実装をしたいので、下記のように記述しました。

※ HTML/CSSかなり適当に書いてます

$(window).on("scroll", () => {
    let pageHeight = $(document).innerHeight();
    let windowHeight = $(window).innerHeight();
    let scrollTop = $(window).scrollTop();
    let scrollBottom = pageHeight - windowHeight - scrollTop;
    let footerHeight = $(".footer").height();

    if (scrollBottom < footerHeight + 100) {
      $(".cta-button").fadeOut(200);
    } else {
      $(".cta-button").fadeIn(200);
    }
});

<body> 
 <div>
    <main>
      main section
    </main>
    <a class="cta-button">
      cta button
    </a>

    <footer class="footer">
      Footer
    </footer>
  </div>
</body>

main {
   height: 3000px;
   font-size: 50px;
   padding-top: 100px;
   text-align: center;
}
.cta-button {
   position: fixed;
   bottom: 20px;
   right: 20px;
   padding: 20px;
   background-color: brown;
   color: white;
   font-size: 40px;
 }

.footer {
   height: 300px;
   background-color: blue;
   color: white;
   font-size: 50px;
   padding-top: 100px;
   text-align: center;
}

実際の動き

コードの説明

$(window).on("scroll", () => {
    // ページ高さを取得
    let pageHeight = $(document).innerHeight();
　　 // ウィンドウ高さを取得
    let windowHeight = $(window).innerHeight();
　　 // スクロールした量を取得
    let scrollTop = $(window).scrollTop();
    // ページ下部からの量を取得 （スクロールした分だけ減っていく）
    let scrollBottom = pageHeight - windowHeight - scrollTop;
    // フッターの高さを取得
    let footerHeight = $(".footer").height();

    // ページ下部からのスクロール量がフッターの高さよりも小さくなった時の分岐
    if (scrollBottom < footerHeight + 100) {
      $(".cta-button").fadeOut(200);
    } else {
      $(".cta-button").fadeIn(200);
    }
});

まとめ

jQueryあまり使わないのですが、使ってみると案外簡単に書けました。

WEB制作とか簡単なアプリケーションなどに使えそうですね。

誰かの参考になれば幸いです！

awayuki