JavaScript : 一定範囲のスクロールを検知するしてクラスを付与・除去する

  • 指定した要素がブラウザ表示範囲の頂上に来たらクラスを付与する
  • 指定した要素がブラウザの表示範囲からでたらクラスを除去する

という仕様でビジュアルコントロールをするスクリプトですが、分かりづらいので以下サンプル画面をスクロールしてみてください。

See the Pen range activate script by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

「Dummy Text Section 1」のブロックが表示範囲にスクロールしたらナビゲーションが出てきます。
「Dummy Text Section 1」が画面外に消えるまでスクロールするとナビゲーションが引っ込みます。

ナビゲーションのレイヤーを「show」というクラスの付与・除去でコントロールしています。
「一定範囲だけである要素を表示させる」という、よくある感じのUIですね。

こういう細かいネタって案外明文化されていないのでメモしておこうと思います。

JavaScript

window.onscroll = function () {
  scrollToggleClass(".section1", ".fixed-nav", "show");
}
function scrollToggleClass(rangeTarget, addTarget, classname) {
  if($(rangeTarget).length){
    scroll = $(window).scrollTop();
    startPos = $(rangeTarget).offset().top;
    endPos = startPos + $(rangeTarget).outerHeight();
    if (scroll > startPos && scroll < endPos) {
        $(addTarget).addClass(classname);
    } else {
        $(addTarget).removeClass(classname)
    }
  }
}

スクロールを検知したら scrollToggleClass() を動かす処理です。

その scrollToggleClass() には範囲対象となる rangeTarget、クラスの取り外しをする addTarget、付与するクラス名 classname を指定します。

rangeTargetの開始位置と終了位置を取得し、あとはウィンドウのスクロール位置に応じてクラスを付けたり外したりしています。

ハックノートをフォローして
最新情報をチェックしよう

AWS構築サービスの全てをまとめた資料を公開中

ハックノート(TOWN株式会社)では、AWSの導入や構築支援を行っています。AWS導入メニューやサービス詳細、構成例や費用を掲載した資料をダウンロードできます。

AWSの新規導入やAWSへの移行を検討の際は、ぜひご参考ください。


APNコンサルティングパートナー

TOWN株式会社はAmazon公認コンサルティングパートナーです。