jquery-scrollstopはスクロールの開始・終了時のイベントを設定することができるjQueryプラグインです。スクロール中に実行したいもの、またはスクロールされていない時に実行したいものを自由にセッティングできるのがいいですね。
jquery-scrollstop
以下はjquery-scrollstopの実際のデモになります。
デモ
デモではスクロールがスタートされ（スクロール中）るとテキストカラーが変更される他、画面上部に「SCROLLING PAGE」という文字が固定表示されます。
そしてスクロールをストップするとテキストカラーが変更され、「SCROLLING PAGE」という文字は非表示になります。
使い方はこんな感じでスクロール開始時と終了時に実行したい動作を設定してあげます。
1 2 3 4 5 6 7 | $(window) .on("scrollstart", function() { $(document.body).css({background: "yellow"}); }) .on("scrollstop", function() { $(document.body).css({background: "green"}); }) |
応用次第で様々な動作を加えることができそうですね。
というわけで、スクロールの開始・終了イベントを設定できる「jquery-scrollstop」のご紹介でした。
詳細は以下からどうぞ。
