最終更新日: 2021年3月16日
jQueryでスクロール時に表示・非表示のアニメーションを行う方法！
jQueryでスクロール時に表示・非表示のアニメーションを行う方法についてサンプルコード付きで解説します。jQueryでスクロール時に表示・非表示のアニメーションを行うには.scroll()メソッドを用いて、イベント処理を行います。
jQueryでスクロール時に表示・非表示のアニメーションを行いたい
jQueryでスクロール時に表示・非表示のアニメーションを行い、ユーザーを惹きつけたいという時がよくあります。
その方法について以降の項目にて解説します。
jQueryでスクロール時に表示・非表示のアニメーションを行う方法
ではjQueryでスクロール時に表示・非表示のアニメーションを行う方法について解説します。
jQueryでスクロール時に表示・非表示のアニメーションを行うには.scroll()メソッドを用いて、要素がスクロールした時のイベント処理を記述します。
今回はwindowのスクロール時にイベントを発生させたいので以下のようなコードになります。
.scroll()メソッド
$(window).scroll(function() {
// スクロール時の処理
});ではサンプルコードを用意したので確認してみましょう。
上記のようにjQueryでスクロール時に表示・非表示のアニメーションが行われていることが分かります。
ここでは表示・非表示をCSSではなくjQueryで行っています。
.scrollTop()メソッド
ここで簡単に上記のサンプルコードで使われている.scrollTop()メソッドについて解説します。
.scrollTop()メソッドは要素の最上部から垂直スクロールした現在位置の上部までのスクロール幅をピクセル単位で取得出来ます。
上記のサンプルコードのthisはWindowオブジェクトを指し、.scrollTop()メソッドにより、現在の縦のスクロール幅を取得しています。
まとめ
いかがでしたでしょうか？
ぜひここで紹介した方法を用いて、スクロール時に表示・非表示のアニメーションを行ってみてください。
