スクロールや要素の位置を取得して何らかの処理を行うことがよくあるのですが、取得方法を忘れがちなのでメモしておきます。
サンプルコード
各値を取得して、HTMLに数値を表示してみます。
HTML
<div id="scroll"> <div>スクロール位置</div> <div>scrollTop():<span id="scrollTop"></span></div> <div>scrollLeft():<span id="scrollLeft"></span></div> </div> <div id="offset"> <div>要素の位置</div> <div>offset().top:<span id="offsetTop"></span></div> <div>offset().left:<span id="offsetLeft"></span></div> </div>
JavaScript
$(function() {
function getScroll() {
$('#scrollTop').text($(window).scrollTop());
$('#scrollLeft').text($(window).scrollLeft());
}
function getOffset() {
$('#offsetTop').text($('#offset').offset().top);
$('#offsetLeft').text($('#offset').offset().left);
}
$(window).on('load scroll', function() {
getScroll();
getOffset();
});
});
スクロール位置の取得は$(window).scrollTop()や$(window).scrollLeft()で、
要素の座標は$(element).offset().topや$(element).offset().leftで取得できます。
基準になる座標はページの左上(body要素の左上)になります。
【参考サイト】
コメントが承認されるまで時間がかかります。