こんにちは、中村です。jQueryを使ってスクロール量によってイベントを発火させたいケースがそれなりに多いので、サンプルと説明を残しておきます。
追記：scroll系のイベントは発火の回数が著しく多いので、重い処理を入れてしまうとユーザー体験を損なう可能性があります。。もし時間があったら、【JavaScript】webサイトのレスポンスが悪くなってしまう前に知っておきたかった記事まとめ。も合わせて見てもらえたら幸いです。
この記事の目次
利用するjQueryメソッド
『scrollTop()』
windowやdocumentなどの要素に対して使えるメソッドです。ページをどれくらいスクロールしたかのスクロール量を測ることができます。
『scroll()』
ブラウザ上でスクロールを行った時に発火するイベントです。スクロール量に応じてイベントを発火させたい場合は『scroll()』を利用して関数を発火させることができます。スクロール毎にイベントが発火するので、あまり重い処理をさせるとページ全体が重くなる危険性があります。
『offset().top』
指定した要素が、ページの上から何px離れているのかを取得してくれるメソッドです。ちなみに要素に対してcssで『{display:none;}』や『{position:absolute;}』をかけていると、位置の取得ができませんのでご注意ください。
これらのjQueryメソッドを利用して、所定の箇所までスクロールした時に発火する関数を作成します。
発火させたい位置を取得
『offset()』を使うことで、指定した要素がページのトップとレフトからどれくらい離れているのかを取得します。今回は、ページ上部からの位置だけわかれば良いので、『offset().top』を利用し発火させたい位置にある要素がページ上部から何pxの位置にあるのかを取得します。
html ページトップから<span id="target"></span>px離れています。
jQuery
jQuery(function(){
var obj_t_pos = $('#target').offset().top; // 変数『obj_t_pos』に位置を代入
$('#target').html(obj_t_pos); // 要素に取得した位置を表示
})
ページトップからpx離れています。
ページトップからのスクロールした距離を測定
スクロール量を取得するメソッドは『scrollTop()』です。ページのトップからどれくらいスクロールしたのかを取得し、それを変数に代入していきます。
html ページトップから<span id="winPos"></span>px離れています。
jQuery
jQuery(function(){
var scr_count = $(window).scrollTop(); // ページトップからのスクロール量を代入
$('#winPos').html(scr_count);
})
ページトップからpx離れています。
上のコードだけではブラウザに読み込まれたあとに１度発火するだけで、変数の値がスクロールに応じて変化してくれません。なので『scroll()』を使ってこれを解決します。
『scroll()』を使いスクロール値を常に更新
『scroll()』は要素に『window , document』を指定するとスクロールが発生した時にイベントを発火してくれます。『scroll()』を使って『scrollTop()』をスクロール毎に発火させましょう。
html ココは、ページトップから<span id="target"></span>px離れています。
jQuery
jQuery(function(){
jQuery(window).scroll(function(){ // スクロール毎にイベントが発火します。
var scr_count = jQuery(document).scrollTop();
jQuery('#target').html(scr_count);
})
})
ページトップからpxスクロールされました。
スクロール毎に変数の値が変わっているのがわかるかと思います。
if else文で条件指定
最後に、上記の指定に『if else文』を追加して、指定した要素の位置に到着した時に発火する関数を完成させましょう。
html スクロール値が近くに来たら文字が赤くなります。
jQuery
jQuery(function(){
jQuery(window).scroll(function(){
var obj_t_pos = jQuery('#target').offset().top;
var scr_count = jQuery(document).scrollTop();
if(scr_count > obj_t_pos){ // スクロール量が、指定した要素の位置を超えたら発火
jQuery('#target').addClass('red'); // 『.red』には『{color:red;}』を指定
}else{
jQuery('#target').removeClass();
}
})
})
スクロール値が近くに来たら文字が赤くなります。
今の状態の『scrollTop()』では、画面上部の位置を取得しているので、要素が画面外に出るタイミングで発火しています。これでは少しタイミングが遅いので、『scrollTop()』で取得した値に『ディスプレイの（半分の）サイズ』を追加し、ディスプレイ中腹の位置を常に取得するように改変し完成させます。
完成
スクロール値が近くに来たら文字が赤くなります。
jQuery
jQuery(function(){
jQuery(window).scroll(function(){
var obj_t_pos = jQuery('#target').offset().top;
var scr_count = jQuery(document).scrollTop() + (window.innerHeight/2); // ディスプレイの半分の高さを追加
if(scr_count > obj_t_pos){
jQuery('#target').addClass('red');
}else{
jQuery('#target').removeClass();
}
})
})
スクロール値が近くに来たら文字が赤くなります。
要素がページの中腹までスクロールされると、文字色が赤くなったかと思います。
完成形
See the Pen [jQuery]要素がディスプレイの中央まで到達すると赤くなる by nkmrkisk (@rekid) on CodePen.
コードは勝手にコピペで持って行っちゃってください。
追記：記事の頭でも記載させていただきましたが、スクロールイベントはここで紹介してる方法で発火させると、かなり発火の回数が多いです。【JavaScript】webサイトのレスポンスが悪くなってしまう前に知っておきたかった記事まとめ。という記事で、jsやjQueryのイベント発火回数を間引きするサンプルコードが紹介されている記事の紹介(w)をしているので、合わせて見てもらえたら幸いです。
おわりに
利用する例で言うと、LP作成か、ページトップへ戻るを表示させるか、スクロールによってナビゲーションを表示させるくらいですかね。
あとは、スクロールといえばパララックス系のエフェクトを導入するときに使えますね。とはいっても、多くはプラグインに頼ることが多くて自分で１から記述することは少なそうですが。
また、下記のようなスクロールに対して動くjQueryのプラグインもご紹介していますので、よかったら見てみてください。