今回はJQueryのoffsetメソッドを使用して座標のtopとleftの値の取得と設定をしてみたいと思います。
それではいってみましょう！
Menu
座標の取得
offsetメソッドは、指定した要素の位置情報を取得しtop（上）とleft（左）の座標位置を取得ができます。
構文
$(“セレクター”).offset().top
$(“セレクター”).offset().left
例
Topの座標を取得する場合
$(“div”).offset().top
取得のサンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://code.jquery.com/jquery-1.8.3.js"></script> <title>offset</title> <style> div{ /* 背景色 */ background-color: red; /* 横幅 */ width: 100px; /* 縦幅 */ height: 100px; /* ポジションを設定（親要素に対して設定） */ position: absolute; left: 123px; top: 123px; } </style> </head> <body> <!-- div要素の座標を取得 --> <div></div> <!-- 取得結果を表示 --> <div id="disp"></div> <script> //ここからJQuery // 変数に格納 let ost = $("div").offset(); // id dispに座標の左端と上の数値を表示させる $("#disp").html("Left:" + ost.left + " Top:" + ost.top); </script> </body> </html> |
【結果】
赤の四角のtopとleftの座標が取得できます。
座標の設定
topとleftプロパティを含むオブジェクトを指定します。
構文
$(“セレクター”).offset({座標})
例
$(“div”).offset({ top: 数値, left: 数値})
設定のサンプルコード
div要素の座標の設定がサンプルのような記述で設定できます。
1 2 3 4 5 6 | <script> $("div").offset({ top: 110, left: 100 }); </script> |
注意事項
・hidden要素のオフセットの座標の取得は不可です。
・body要素に設定されたborder,margin,paddingを含めた位置計算は不可です。
・display : noneは未定義(undefined)のpositionとなります。
・visibility : hiddenは座標の取得が可能です。
まとめ
offsetはスクロールしたらnavやサイドメニュー、右下に固定されるTOPへのボタンなどの座標位置を取得する際によく使用されます。
この機会にスクロール後の固定表示ができる機能をサイトやブログに追加してみてはいかがでしょうか！
【JQuery】画面をスクロールすると出てくるメニューと固定表示
【JQuery/CSS】スクロール後に絵文字を固定表示させる
【JQuery】Window（画面ブラウザ）のスクロール位置を取得する
