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 <h1> at the top of the page?

MikeM
– MikeM

2011-06-23 20:26:46 +00:00
Commented Jun 23, 2011 at 20:26 — MikeM
– MikeM, Commented Jun 23, 2011 at 20:26

MidnightLightning · Accepted Answer · 2017-12-15 17:30:34Z

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, 2017 at 17:30

answered Jun 23, 2011 at 20:24

MidnightLightning

7,0087 gold badges48 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Björn Over a year ago

Exactly, the position of the element relative to the top of the document does not change when you're scrolling through the page.

Noyo · Accepted Answer · 2013-10-01 09:04:54Z

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 1, 2013 at 9:04

answered Sep 24, 2013 at 11:08

Noyo

5,1444 gold badges44 silver badges46 bronze badges

1 Comment

Hydrogen-4 Over a year ago

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.

Aleks G · Accepted Answer · 2011-06-23 20:32:41Z

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.

Collectives™ on Stack Overflow

Detecting offset of an element on scroll in javascript / jQuery

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related