WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

jQueryでブラウザのスクロール値を取得してみる

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

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

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

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

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

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

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

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

[html]
◆HTML

現在のスクロール位置:
ページTOPから150px地点
ページTOPから300px地点
ページTOPから500px地点


[/html]

[javascript]
◆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(‘

ページTOPから150px通過

‘);
$(‘#alert300’).remove();
$(‘#alert500’).remove();
}
}
if ($(‘#intervalValue’).val() > 300 ) {
if(document.getElementById(“alert300”) === null){
$(‘body’).prepend(‘

ページTOPから300px通過

‘);
$(‘#alert150’).remove();
$(‘#alert500’).remove();
}
}
if ($(‘#intervalValue’).val() > 500 ) {
if(document.getElementById(“alert500”) === null){
$(‘body’).prepend(‘

ページTOPから500px通過

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

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

jQueryでブラウザのスクロール値を取得してみる」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です