Get item offset from the top of page

Question

I am trying to get the top offset of a div, and I have the following code that gets run when the page gets scrolled:

var $elem = document.querySelector(selector);
var elemTop = $elem.offsetTop;
console.log(elemTop);

But when I scroll it always prints 0 to the console, even though the element is below the fold.

Does the element have an offsetParent? Docs say: `The HTMLElement.offsetTop read-only property returns the distance of the current element relative to the top of the offsetParent node.` — Sterling Archer, Dec 22 '15 at 18:29
It looks like it, `$elem.offsetParent`, when I scroll I get an html element in the console. — Get Off My Lawn, Dec 22 '15 at 18:32
Okay, so how to I get the offset to the root of the document? — Get Off My Lawn, Dec 22 '15 at 18:33
You mean like [this?](http://stackoverflow.com/questions/9880472/determine-distance-from-the-top-of-a-div-to-top-of-window-with-javascript) — Sterling Archer, Dec 22 '15 at 18:34

score 56 · Accepted Answer · answered Dec 22 '15 at 18:42

56

var elmTop = $elem.getBoundingClientRect().top + window.scrollY;

element.getBoundingClientRect() gives the position within the viewport, and window.scrollY gives the distance from the top of the viewport to the top of the document.

answered Dec 22 '15 at 18:42

Jack

9,448
3
29
33

An alternative would be to walk up the DOM using element.offsetParent, adding each node's offsetTop together to get the measurement. This is more complicated, but probably more efficient than calculating the values of getBoundingClientRect, which is something to be mindful of when executing anything onScroll. – Jack Dec 22 '15 at 18:58

Dmitry Shashurov · Answer 2 · 2021-04-10T15:31:08.680

1

Solution how to check if the scroll has reached a certain element:

    const getOffsetTop = function(element) {
        if (!element) return 0;
        return getOffsetTop(element.offsetParent) + element.offsetTop;
    };

    const $el = document.querySelector(".button");

    window.addEventListener("scroll", function() {
        console.log(window.scrollY + window.innerHeight > getOffsetTop($el));
    });

edited Apr 10 '21 at 15:31

answered Apr 10 '21 at 15:25

Dmitry Shashurov

1,148
13
11

Get item offset from the top of page

2 Answers2

Linked