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