HTML DOM Element offsetTop

❮ Previous ❮ Element Object Reference Next ❯

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:

CSS Box Model

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.

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 »