jQuery ページスクロールしたときにクラスを付与する方法

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>[code]

この HTML で、.target というクラスを持つ要素に、ページ上部から 200px スクロールしたときに「active」というクラスが付与されることになります。
また、スクロール量を取得する代わりに、要素の位置を取得することもできます。次のコードは、.target 要素の位置を取得し、その上端が画面上端から 200px 以上離れているかどうかを確認しています。
[code]$(window).scroll(function() {

  // 要素の位置を取得

  var targetTop = $(".target").offset().top;
  // 要素の上端が画面上端から 200px 以上離れているかどうかを確認

  if (targetTop >= 200) {

    // 要素にクラスを付与

    $(".target").addClass("active");

  } else {

    // 要素からクラスを削除

    $(".target").removeClass("active");

  }

});

offset() を利用して要素の位置を取得しています。スクロール量を取得する代わりに、要素の位置を取得することで、スクロールバーの位置や要素のサイズに影響されずに、要素の表示状態を判定することができます。