JavaScriptプログラムに関する各種メモ書き

jQueryで "ある要素" が画面内にあるかどうかを判別する

jQueryで "ある要素" が画面内にあるかどうかを判別するには

要素のページ内での位置(Y座標)、現在のスクロール位置(Y座標)を見て判別します。

$(function() {
	// 引き金となる要素を設定
	var triggerNode = $(".trigger");
	// 画面スクロール毎に判定を行う
	$(window).scroll(function(){
		// 引き金となる要素の位置を取得
		var triggerNodePosition = $(triggerNode).offset().top - $(window).height();	
		// 現在のスクロール位置が引き金要素の位置より下にあれば‥
		if ($(window).scrollTop() > triggerNodePosition) {
			// なんらかの命令を実行
			console.debug("Do Something");
		}
	});

引用元:http://hennayagyu.com/webhack/javascript/

ある要素が表示されたときに命令を実行するjavascript-w-jquery-2348

関連エントリー

No.879
05/30 10:08

edit

jQuery