HTML DOM Element offsetTop
Example
Get the offsetTop position of "myDIV":
const element = document.getElementById("myDIV");
let pos = element.offsetTop;
Try it Yourself »
Get the positions of "myDIV":
const element = document.getElementById("test");
Let pos1 = element.offsetTop;
let pos2 = element.offsetLeft;
Try it Yourself »
More examples below.
Definition and Usage
The offsetTop property returns the top position (in pixels) relative to the parent.
The returned value includes:
- the top position, and margin of the element
- the top padding, scrollbar and border of the parent
The offsetTop property is read-only.
Tutorial:
The offsetParent
All block-level elements report offsets relative to the offset parent:
- offsetTop
- offsetLeft
- offsetWidth
- offsetHeight
The offset parent is the nearest ancestor that has a position other than static.
If no offset parent exists, the offset is relative to the document body.
See Also:
Syntax
Return the top offset position:
element.offsetTop
Return Value
| Type | Description |
| Number | The top position of the element, in pixels. |
More Examples
Create a sticky navigation bar:
// Get the navbar
const navbar = document.getElementById("navbar");
//
Get the offset position of the navbar
const 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");
}
}
Try it Yourself »
Browser Support
element.offsetTop is supported in all browsers:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |
