jQuery ページスクロールしたときにクラスを付与する方法
最終更新日 - 公開日 2023.09.01
by
jQuery ページ上部からスクロールしたときにクラスを付与する方法を紹介します。
例えば、ページスクロールして、任意の位置にバナーを表示したいときなどに便利な方法です。
$(window).scroll(function() {
// スクロール量を取得
var scrollY = $(window).scrollTop();
// 200px スクロールしたら
if (scrollY >= 200) {
// 要素にクラスを付与
$(".target").addClass("active");
} else {
// 要素からクラスを削除
$(".target").removeClass("active");
}
});
$(window).scroll() イベントを利用して、ページのスクロール量を取得します。例えば、ページ上部からスクロール量が 200px 以上になった場合は、任意の要素にクラスを付与します。スクロール量が 200px 未満になった場合は、クラスを削除します。
<div class="target"></div>
この HTML で、.target というクラスを持つ要素に、ページ上部から 200px スクロールしたときに「active」というクラスが付与されることになります。
また、スクロール量を取得する代わりに、要素の位置を取得することもできます。次のコードは、.target 要素の位置を取得し、その上端が画面上端から 200px 以上離れているかどうかを確認しています。
$(window).scroll(function() {
// 要素の位置を取得
var targetTop = $(".target").offset().top;
// 要素の上端が画面上端から 200px 以上離れているかどうかを確認
if (targetTop >= 200) {
// 要素にクラスを付与
$(".target").addClass("active");
} else {
// 要素からクラスを削除
$(".target").removeClass("active");
}
});
offset() を利用して要素の位置を取得しています。スクロール量を取得する代わりに、要素の位置を取得することで、スクロールバーの位置や要素のサイズに影響されずに、要素の表示状態を判定することができます。