Offset Exp. 2

by Brian Burns

HTML

<div id="display">scroll down</div>
<div id="overflow">
  <div class="dead-space"></div>
  <div id="offset"></div>
  <div class="dead-space"></div>
</div>

CSS

* {margin:0; padding:0;} /* just to make things pretty */
div {z-index:1; position:relative; width:100%;}
div.dead-space {height:2000px; background-color:grey;}
#overflow {position:absolute; top:100px; left:0px; height:calc(100% - 100px); box-sizing:border-box; overflow-y:scroll;}
#offset {height:100px; background-color:aqua;}
#display {z-index:2; position:fixed; top:10px; left:0px; text-align:center; color:black; font-size:20px;}

JavaScript

$('#overflow').scroll(function(){
	var pos = $('#offset').offset().top - $('#overflow').offset().top;
	$('#display').text("div#offset is " + pos + "px from top");
});