【jQuery】特定の位置まで来たらイベントを実行
【jQuery】特定の位置まで来たらイベントを実行
jQueryを利用して特定の位置に来たらイベントを発火させる
ある特定の要素の位置まで来たら何かしらのイベントを起こしたい時があると思います。
案件によってはあるのでメモがてら。
var thisOffset;
$(window).on('load', function () {
thisOffset = $('セレクタ').offset().top + $('セレクタ').outerHeight();
});
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > thisOffset) {
// 特定の要素を超えた
} else {
// 特定の要素を超えていない
}
});
ポイント解説
まずは最初の行の変数宣言しているところです。
一見普通の宣言なのですが、この変数はグローバル変数として扱われます。
初心者の方はここも覚えておくと今後役に立つと思います。
グローバル変数とは簡単に言うとどこででも使用が可能な変数です。
（スコープの範囲が限定的ではなく、どこからでも参照が可能）
意外に正確な値を取るのが難しいoffset
次に$(window).on(‘load’,function)です。
小見出しに書いている、意外に難しいというところに繋がります。
なぜ、いつもの$(function()ではないのかというところがポイントです。
違いは処理の実行タイミングが違います。
$(function()ではDOMの読み込みが終了したら実行されます。
ですが、$(window).on(‘load’,function)の場合は、画像も全て読み込み終わってから実行となります。
スライダー系のプラグインを使用している場合や、画像が重たいなど様々な理由で$(function()では画像の読み込み後には間に合わず、きちんとした位置の取得ができないことがあります。
その場合は$(window).on(‘load’,function)を使用しましょう。
outerHeightメソッドで、border,paddingを含んだ高さ(marginは含んでいませんが、引数で指定することで取得可能です。)を取得します。
$(window).scroll(function()はスクロール時に実行という意味です。
条件式if文でスクロールした数値とブラウザのwindowの高さが、一番上からフッターの高さを含めた数値を超えた場合TRUEに入ります。
そうでなければFALSEとなります。
あとはTRUEで好きな処理を入れてください。そしてFALSEで解除するなどして利用してください。
動的に読み込ませるものなどによっては高さがきちんと取得できない時があります。
そう言う時は、$(window).resize(function(),$(window).scroll(function()時などに再度取得する命令を記述することで再度取得することが出来ます。
注意点
colorやbackgroundを変更したい時、変更される値は16進数で記述していても、rgbで指定されます。
この記事ですが、時間ができたらサンプルの準備とリライトします。。。