HTML DOM Element offsetTop 属性
- 前のページ offsetParent
- 次のページ outerHTML
- 上一层に戻る HTML DOM Elements オブジェクト
定义和用法
offsetTop 属性返回相对于父级的顶部位置（以像素计）。此属性是只读的。
返回值包括：
- 元素的顶部位置和外边距
- 父的顶部内边距、滚动条和边框
请参阅：CSS 框模型教程
offsetParent
所有块级元素都报告相对于偏移父级的偏移量：
- offsetTop
- offsetLeft
- offsetWidth
- offsetHeight
偏移父级指的是最近的具有非静态位置的祖先。
如果不存在偏移父级，则偏移量是相对于文档正文的。
另请参阅：
インスタンス
例 1
"myDIV" の offsetTop 位置を取得します：
const element = document.getElementById("myDIV");
let pos = element.offsetTop;
例 2
"myDIV" の位置を取得します：
const element = document.getElementById("test");
Let pos1 = element.offsetTop;
let pos2 = element.offsetLeft;
例 3
粘性ナビゲーションバーの作成：
// ナビゲーションバーを取得します
const navbar = document.getElementById("navbar");
// ナビゲーションバーのオフセット位置を取得します
const sticky = navbar.offsetTop;
// ページのスクロール位置に到達した場合、ナビゲーションバーに sticky クラスを追加します。スクロール位置から離れた場合、sticky クラスを削除します。
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
}
navbar.classList.remove("sticky");
}
}
文法
top offset 位置を返します：
element.offsetTop
返り値
| タイプ | 説明 |
|---|---|
| 数字 | 要素のトップ位置、ピクセル単位で示されます。 |
ブラウザのサポート
すべてのブラウザがサポートしています element.offsetTop：
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| サポート | サポート | サポート | サポート | サポート | サポート |
- 前のページ offsetParent
- 次のページ outerHTML
- 上一层に戻る HTML DOM Elements オブジェクト
