jQueryで上スクロールと下スクロールで違う処理をする!

2014/11/03

jquery_up_down

こんにちは。
今回はjQueryで上スクロールと下スクロールで違う処理をする!です。

広告とかを表示したい時等にたまに上スクロールと下スクロールで違う処理をしたい時ってありますよね。
今回はそれのメモ書きです。

[javascript]
$(function() {
var before = $(window).scrollTop();
$(window).scroll(function() {
var after = $(window).scrollTop();
if(before > after) {
上スクロールした時の処理
}
else if(before < after) { 下スクロールした時の処理 } before = after; }); }); [/javascript]

beforeという変数が最初のスクロールの位置を取得しています。
afterが後のスクロールの位置を取得していますよ。
beforeがafterより大きい時は上スクロールになります。
その反対でbeforeがafterより小さい時は下スクロールになりますよ。

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer's SELECTION)
コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

 

ちょっと難しいですが、スクリプトを見るとなるほどという感じですね。
以上でjQueryで上スクロールと下スクロールで違う処理をする!でした。

この記事を読んだ人はこんな記事も読んでいますよ