Web制作

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

2016.06.29

2017.05.16

諜報員風の男性

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

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

offset()

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

scrollTop()

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

addClass(),removeClass()

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

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

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。