スクロール位置によって何らかの処理を行いたいときのために、
スクロールの位置(画面上部、下部、中央)を取得するサンプルをメモ。
サンプルはjQueryを使用します。
サンプルコード
$(function() {
function scrollPoint() {
var windowHeight = $(window).height(),
windowScrolltop = $(window).scrollTop(),
scrollBottom = windowHeight + windowScrolltop,
scrollMiddle = windowHeight / 2 + windowScrolltop;
$('#height span').text(windowHeight);
$('#top span').text(windowScrolltop);
$('#middle span').text(scrollMiddle)
$('#bottom span').text(scrollBottom)
}
$(window).on('load resize scroll', function() {
scrollPoint();
});
});
$(window).height()で画面の高さ(windowHeight)を、
$(window).scrollTop()で画面上部のスクロール位置(windowScrolltop)を取得。
画面下部のスクロール位置(scrollBottom)はwindowScrolltopとwindowHeightを足したもの、
画面中央(scrollMiddle)はwindowScrolltopとwindowHeightの半分(中央)を足したものになります。
この処理をページ読み込み時、画面サイズ変更時、スクロール時に実行するようにしています。
コメントが承認されるまで時間がかかります。