要素offsetTopプロパティ
❮要素オブジェクト例
<div>要素のoffsetTop位置を取得します。
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
定義と使用法
offsetTopプロパティは、offsetParent要素の上部を基準にした上部の位置（ピクセル単位）を返します。
戻り値は次のとおりです。
- 上部の位置、および要素のマージン
- offsetParent要素の上部のパディング、スクロールバー、および境界線
注： offsetParent要素は、静的以外の位置を持つ最も近い祖先です。
ヒント：要素の左の位置を返すには、offsetLeftプロパティを使用します。
ブラウザのサポート
| Property | |||||
|---|---|---|---|---|---|
| offsetTop | Yes | 8.0 | Yes | Yes | Yes |
構文
上部のオフセット位置を返します。
object.offsetTop
技術的な詳細
| デフォルト値： | デフォルト値なし |
|---|---|
| 戻り値： | 要素の上部の位置をピクセル単位で表す数値。 |
| DOMバージョン： | CSSOM |
その他の例
例
aa <div>要素の位置を取得します。
var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
例
粘着性のあるナビゲーションバーを作成します。
// Get the navbar
var navbar = document.getElementById("navbar");
//
Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position.
Remove the sticky class when you leave the scroll position.
function myFunction() {
if (window.pageYOffset
>= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
❮要素オブジェクト