TAGS :,

先日ふとしたところで、ブラウザのスクロール値によって表示の切り替えを行う必要があり、
jQueryでスクロール量を測るサンプルを作ったので紹介してみます。

jQueryでブラウザのスクロールされた際の値を取るには
『.scrollTop（縦スクロール）』もしくは『.scrollLeft（横スクロール）』などがありますが、
あまり横スクロールで何か制御をするってことは少なく、縦スクロール値を取得する『.scrollTop』を使用することがほとんど。

なので、今回はページTOPからスクロールされた値『.scrollTop』を取得する際のサンプル。

実際の取得する際の記述方法は

$(window).scrollTop();
$(document).scrollTop();

といった書き方でページのTOPからの距離を測れます。
『$(‘html’).scrollTop();』でもいけるっぽいですが、Safariの3以前ではきちんと動作してくれないようで。。。

スクロール値を取得する動作サンプルは以下。

iframe内をスクロールすると左上の『現在のスクロール位置』にスクロールされた値が表示されます。
※サンプルはiframeなのでページTOP位置はiframeスクロールエリアの一番上が基準になっています。

境界線を３つ用意してあり、ページTOPから「150px」「300px」「500px」を過ぎると
それぞれ右上に通過エリア（テキスト）が表示されます。

このサンプルの構成は以下のような感じに。

◆HTML
<div id="container">

<div id="interval">現在のスクロール位置：<input type="text" size="10" value="0" id="intervalValue" /></div>

<div id="section150">ページTOPから<strong>150px</strong>地点</div>
<div id="section300">ページTOPから<strong>300px</strong>地点</div>
<div id="section500">ページTOPから<strong>500px</strong>地点</div>

</div><!--/container-->

◆SCRIPT
$(function(){
	$(window).scroll(function () {
		var ScrTop = $(document).scrollTop();

		$('#intervalValue').val(ScrTop);

		if ($('#intervalValue').val() < 150) {
			$('#alert150').remove();
			$('#alert300').remove();
			$('#alert500').remove();
		}
		if ($('#intervalValue').val() > 150) {
			if(document.getElementById("alert150") === null){
				$('body').prepend('<div id="alert150">ページTOPから<span>150px</span>通過</div>');
				$('#alert300').remove();
				$('#alert500').remove();
			}
		}
		if ($('#intervalValue').val() > 300 ) {
			if(document.getElementById("alert300") === null){
				$('body').prepend('<div id="alert300">ページTOPから<span>300px</span>通過</div>');
				$('#alert150').remove();
				$('#alert500').remove();
			}
		}
		if ($('#intervalValue').val() > 500 ) {
			if(document.getElementById("alert500") === null){
				$('body').prepend('<div id="alert500">ページTOPから<span>500px</span>通過</div>');
				$('#alert150').remove();
				$('#alert300').remove();
			}
		}
	});
});

スクロール地点によって何か表示するものを変化させたい場合や、
最近たまに見かける、追尾型のメニューエリアなどでもこの『.scrollTop』を使えば簡単に作成可能になります。
その他はあまり使用する場面がないかもしれませんが…

そんなこんなですが、
スクロール制御したい際には是非。。。