Detecting offset of an element on scroll in javascript / jQuery

Question

I am looking to calculate the distance between an element and the top of the document window. On scroll I am able to get the initial value but it does not change. How can I find this value and what the number has changed to on scroll?

JS:

$(function() {
    $(window).scroll(function() {
        var h1 = $("h1");
        console.log(h1.offset().top)
    });
});

HTML:

<div id="cover">   
    <h1>hello sir</h1> 
</div>

Are you looking to keep the `
` at the top of the page?
– MikeM Jun 23 '11 at 20:26 — MikeM, Jun 23 '11 at 20:26

MidnightLightning · Accepted Answer · 2017-12-15T17:30:34.777

30

Compare the offset of the <h1> element to how far down the page the user has scrolled. The $(window).scrollTop() function will get you the amount the user has scrolled down so:

$(window).scroll(function() {
  var $h1 = $("h1");
  var window_offset = $h1.offset().top - $(window).scrollTop();
});

edited Dec 15 '17 at 17:30

answered Jun 23 '11 at 20:24

MidnightLightning

6,715
5
44
68

1

Exactly, the position of the element relative to the top of the document does not change when you're scrolling through the page. – Björn Jun 23 '11 at 20:37

Noyo · Answer 2 · 2013-10-01T09:04:54.527

9

If you hate arithmetic (and extra function calls), this should do the trick:

$(function() {
    var h1 = document.getElementsByTagName("h1")[0];
    $(window).scroll(function() {
        console.log(h1.getBoundingClientRect().top);
    });
});

This is exactly what getBoundingClientRect() was made for.

edited Oct 01 '13 at 09:04

answered Sep 24 '13 at 11:08

Noyo

4,874
4
39
41

1

Maybe I am missing something but IMO this is the correct answer. I had to do a ripple effect at the location of a click evet and it had to happen within a table row. So I had to temporarily position absolute a div on top of the row with overflow hidden so the ripple didn't exceed the row borders. The center of the ripple was off when scrolling. This solution worked for me, nice and simple. – Hydrogen-4 Jun 13 '21 at 04:15

score 3 · Answer 3 · answered Jun 23 '11 at 20:32

You can use this function to get the scroll offset of the window:

function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}

Then you can use the offsets in your function to determine the real position of your element:

$(function() {
    $(window).scroll(function() {
        var h1 = $("h1");
        var offs = getScrollXY();
        console.log(h1.offset().top - offs[1]);
    });
});

Theoretically, this should work in all browsers, but, frankly, I didn't do too much testing.

Detecting offset of an element on scroll in javascript / jQuery

` at the top of the page?

3 Answers3

Linked