Detecting offset of an element on scroll in javascript / jQuery

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();});

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.

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.