「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制作とか簡単なアプリケーションなどに使えそうですね。
誰かの参考になれば幸いです！
