Element offsetTop 属性
实例
获取 div 元素的顶部偏移量:
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
亲自试一试 »
document.getElementById("demo").innerHTML = testDiv.offsetTop;
定义和用法
offsetTop 是一个只读属性，返回当前元素相对于 offsetParent 节点顶部边界的偏移像素值。
返回值包含:
- 元素顶部偏移的像素值，元素的外边距（margin）
- offsetParent 元素的顶部内边距（padding）、边框（border）及滚动条
注释: offsetParent 元素是一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的元素。
提示: 获取元素左侧的偏移量使用 use the offsetLeft 属性。
浏览器支持
| 属性 | |||||
|---|---|---|---|---|---|
| offsetTop | Yes | 8.0 | Yes | Yes | Yes |
语法
返回顶部偏移位置:
object.offsetTop
技术细节
| 默认值: | no default value |
|---|---|
| 返回值: | 一个整数，表示该元素的顶部偏移量，单位是像素 px。 |
| DOM 版本: | CSSOM |
更多实例
实例
获取 div 元素的位置:
var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
亲自试一试 »
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");
}
}
亲自试一试 »
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");
}
}
