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

指定した要素がブラウザ表示範囲の頂上に来たらクラスを付与する 指定した要素がブラウザの表示範囲からでたらクラスを除去する という仕様でビジュアルコントロールをするスクリプトです。 言葉だけでは分かりづらいので以下サンプル画面をスクロールしてみてください。 See the Pen range activate script by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 「Dummy Text Section 1」のブロックが表示範囲最上部に来たらナビゲーションが出てきます。 「Dummy Text Section 1」が画面外に消えるまでスクロールするとナビゲーションが引っ込みます。 ナビゲーションのレイヤーを「show」というクラスの付与・除去でコントロールしています。 「一定範囲だけである要素を表示させる」という、よくある感じのUIです。