CODEWITHSUNDEEP
javascriptdomposition
Hezequiel
Hezequiel

Reputation: 61

Get position of DOM element relative to top of the page with Javascript (Cross-Browser)

I'm having an issue in trying to determine the position of a DOM element relative to the top of the page (whether in or out of the viewport).

Now, in Firefox, this is very easy, just do:

jQuery(element).offset().top

In Chrome, however, that expression returns the position of the element relative to the viewport, which changes as I scroll up and down the page. In that case, I can instead calculate the value I want by doing:

jQuery(element).offset().top + document.body.scrollTop

The difficulty is, of course, that different versions of Chrome might deal with this differently, not to speak of other browsers I can't even test! Is there a cross-browser simple solution to find this value? It would seem like a simple enough thing to want to do.

Edit

As somebody helpfully pointed out, "this should be the same, that's the point of jQuery." I tested it on other websites, and this is so. Somehow, my website is throwing it off for some reason. Any clues of what might be causing this?

Upvotes: 1

Views: 202

Answers (1)

Hezequiel
Hezequiel

Reputation: 61

Found it! As it turns out, there was a strange CSS rule to this effect:

html, body {
    overflow-y: scroll;
}

That was creating a scroll-window inside a scroll-window (but somehow, hidden from view) which means that, even though I was scrolling down through the inner, 'body' window, my viewport wasn't actually moving. I realized this when noticing that the window.pageYOffset was returning always 0.

Upvotes: 1

Related Questions