【jQuery】特定の要素が画面内にレンダリングされた際、処理を実行する。

ブログなどの画面をスクロールしていると、読み終わるころにぴょこっと右下からお勧め記事が出てきたりする際にやってるやーつー。

いたって実装は単純。

$(function(){
	// 処理実行の引き金となる要素を設定
	var target = $("#target");
	$(window).scroll(function(){
		// 実行のトリガーになる要素のオフセット(一番上からの距離)から
		// 画面の縦幅を引いたものを処理実行までの距離とする(画面の下端を基準に設定)
		var tPos = $(target).offset().top - $(window).height();	
		// スクロールされた長さが上記で求めた距離を越えた場合、処理を実行
		if ($(window).scrollTop() >= tPos) {
			// 処理を記述
		}
	});
});

以下関数の解説。

■scroll()
画面のスクロールをトリガーに処理を実行する。

■offset()
指定した要素が可視状態の場合(display:noneとかじゃない)、ドキュメント内最上端から指定要素上端までの距離を取得する。

■height()
指定した要素の高さを取得する。$(window).height()の場合、現在の表示領域(画面の高さ)を返却する。

■scrollTop()
ドキュメントの最上端から現在までにスクロールされた距離をピクセルで返却する。

これらの関数を用いれば、ユーザー操作に連動したダイナミックな処理を簡単に実装することが出来る。
例えばフッターをターゲット要素に設定した場合、自動で次ページを取得しDOMに追加するといった、オートページャー的処理も簡単に行えちゃうのである。