getBoundingClientRectは、HTMLエレメント（要素）の位置座標を取得することができるメソッドです。
「ある程度までスクロールすると表示されるアレ」を、プレーンなJavaScriptとHTML/CSSで実装してみました。なぜかスマホだとうまく動かないですが、説明用なのでOK！
getBoundingClientRectの使い方
最初に要素を取得する必要があります。まず説明用にonclickを使って、要素をクリックするたびに処理が行われるようにします。
<！-- html -->
<div id = "rect" onclick = "rectTest();"
style = "width:600px; border:1px solid black;"></div>
//JavaScript
function rectTest(){
let position = document.getElementById("rect");
}これでdivをクリックするたびに、関数「rectTest」が実行されるようになりました。では、座標を取得してみたいと思います。
要素.getBoundingClientRect
取得した座標は一度変数に代入し、代入した変数からプロパティ「left」および「top」で具体的な値を引き出します。
座標.top
画面の上端から見た要素の上端までの距離
座標.top
実際にこれを仕込んで、出力するようにしてみました。
//JavaScript
var xy = position.getBoundingClientRect();
var x = xy.left ;
var y = xy.top ;
position.innerHTML = "xは" + x + "です。yは" + y + "です。";上の要素をクリックすると座標が表示されます。これが何かというと、「要素の左上が画面の左上にくっついた場所」を0,0として、左からどれぐらい右にいったか、上からどれぐらい下に離れているかを意味しています。下に離れている＝要素が下に移動しているので、要素が上に移動する＝画面を下にスクロールするにつれて数字が少なくなります。
画面をスクロールして再度マウスを乗せるとy軸の数値が変わりますし、ブラウザのサイズを変えるとdivの位置も調整されるので、x軸も変わります。
スクロール時に座標を取得
このgetBoundingClientRectを、スクロールした時に自動的に実行するようにしてみます。
スクロールした時に処理を実行するには、オブジェクトをwindowにし、addEventListenerでイベントの種類を「scroll」に設定します。
window.addEventListener(“scroll”,実行する関数,オプション);
※オプションは省略可能
※windowも省略可能
色々と省略して、次のようなものを作りました。座標を出力する場所は変えたいので、関数rectTest2でちがうdivを指定することにします。ただし、取得する座標はさっきのクリックして表示するdivのものです。
addEventListener("scroll",rectTest2);スクロールすると自動的に座標が取得されるようになりました。そして、要素が画面外にある場合にも、x/y座標が取得され続けることがわかりました。
このy軸をif文の条件に使えば、スクロールした時に特定の動作をさせることができそうです。
座標によって処理を変える
画面に表示された時のy軸の座標は、実際のところ端末やブラウザの状態に左右されます。ある程度メディアクエリを使用して書き分けるのが理想的かもしれませんが、ひとまずここではy=400以下になった場合に処理をすることにします。
if(y <= 400){
position.classList.remove("toHide");
position.classList.add("toShow");
}hideクラスには、CSSのopacityで「透明にする」という設定をしています。これを排除することで、不透明になりながら表示する処理を与えることができます。
コメント