スクロール位置によって何らかの処理を行いたいときのために、
スクロールの位置(画面上部、下部、中央)を取得するサンプルをメモ。
サンプルは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の半分(中央)を足したものになります。
この処理をページ読み込み時、画面サイズ変更時、スクロール時に実行するようにしています。
コメントが承認されるまで時間がかかります。