簡単なJSでスクロールするとついてくるメニューを実現！

jQueryを利用するとWebサイトに簡単にちょっとした機能を実現できます。

今回は様々なWebサイトで実装されている、スクロールすると画面上部に追従してくるメニューを実現するjQueryを紹介します。

offset()

offset()はページ左上からオブジェクトまでの距離を取得します。leftとtopの値を持っていてそれぞれ左端からの距離、上端からの距離を取得します。

scrollTop()

オブジェクトのスクロール量を取得します。$(window).scrollTop()を記述することでそのページのスクロール量を取得します。

addClass(),removeClass()

addClass()はオブジェクトに指定したクラスを付与、removeClass()は解除します。

今回紹介したJSは主には上記４つの要素で成り立っています。それぞれは非常に簡単な要素ですがそれを組み合わせることでHTMLだけでは実現できない機能をWebサイトに持たせることができます。