jQueryでスクロールに応じて要素のクラスを変える - JavaScriptのチュートリアル

このレッスンでは jQueryを使って ウィンドウのスクロールに応じて 要素のクラスを切り替えるという処理を 行ってみたいと思います。 今開いてるドキュメント、 jQueryを読み込んでいます。 そしてドキュメントの準備を 待つという処理だけは jQueryで書いています。 $ の () の中に 準備が整ったら行いたい リスナー関数を書けばいいということです。 ただそのリスナー関数の中の処理は これはすべて標準のJavaScriptコードです。 クラスを設定したい要素を getElementById で取り出したら ウィンドウのスクロールは addEventListener の scroll その中にリスナー関数があって window の pageYOffset によって 垂直スクロールの大きさを知り classList の add、 あるいは remove で クラスを設定したり あるいは削除したりということを しています。 今の動きを確かめておきます。 クラスでスタイルを変えるのは このヘッダーの部分です。 スクロールすると 丈の詰まったヘッダーに変わり、 戻すとまた大きいヘッダーに戻ります。 この動きは変えずに jQueryで処理を行ってみたいと思います。 まずはクラスを変えたい id top-head の要素ですね。 これを取得すると 処理の構成は同じですね。 ただメソッドとかが違うんですが、 const で header を取ると、 上の部分は コメントアウトしておきましょう。 そして getElementById とか こんな長いの必要ありません。 $() の中に CSSのセレクターと同じ要領で 取得したいものを書いていきます。 IDはハッシュですね。井桁です。 井桁で top-head、 これで取得ができます。 しかも $() の中に入れると jQueryといろんな機能が 付け加わった状態で、 要素は取れるんですね。 ですから標準JacaScriptにはない メソッドを使ったり、 プロパティの参照ができるということです。 それからやはり window を使うんですが、 これも機能を拡張します。 const で window という名前は 使われちゃってますので では $window にしましょう。 変数名に記号として…