Offset Exp. 1

by Brian Burns

HTML

<div id="display">scroll down</div>
<div class="dead-space"></div>
<div id="offset"></div>
<div class="dead-space"></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;}
#offset {height:100px; background-color:aqua;}
#display {z-index:2; position:fixed; top:10px; left:0px; text-align:center; color:white; font-size:20px;}

JavaScript

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