<div id="wrap">
<div id="main">
<div id="block">
<p id="el">hi</p>
</div>
</div>
<div id="result">
<div class="result">
<span>Parent top:</span>
<span id="parent-top">0</span>
</div>
<div class="result">
<span>Parent left:</span>
<span id="parent-lft">0</span>
</div>
<div class="result">
<span>Child top:</span>
<span id="child-r-top">0</span>
</div>
<div class="result">
<span>Child left:</span>
<span id="child-r-lft">0</span>
</div>
<div class="result">
<strong>Child to parent top:</strong>
<span id="child-top">0</span>
</div>
<div class="result">
<strong>Child to parent left:</strong>
<span id="child-lft">0</span>
</div>
</div>
</div>
html,
body {
padding: 0;
margin: 0;
background-color: #fff;
font-family: monospace;
font-size: 18px;
line-height: 1.4;
color: #333;
}
* {
box-sizing: border-box;
}
#wrap {
padding: 40px;
height: 3000px;
width: 100%;
min-width: 600px;
}
#main {
padding: 60px;
}
#el {
padding: 10px;
border: 1px solid #f00;
}
#result {
margin-top: 20px;
position: sticky;
top: 20px;
}
.result {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
View Compiled
function getPosition() {
var $el = $('#el'),
$main = $('#main'),
winScrollTop = $(window).scrollTop(),
winScrollLft = $(window).scrollLeft(),
mainXPos = $main.offset().left - winScrollLft,
mainYPos = $main.offset().top - winScrollTop,
elXPos = $el.offset().left - winScrollLft,
elYPos = $el.offset().top - winScrollTop,
elXTruePos = elXPos - mainXPos,
elYTruePos = elYPos - mainYPos;
$('#parent-top').text(mainYPos);
$('#parent-lft').text(mainXPos);
$('#child-top').text(elYTruePos);
$('#child-lft').text(elXTruePos);
$('#child-r-top').text(elYPos);
$('#child-r-lft').text(elXPos);
}
$(function () {
getPosition();
});
$(window).on('scroll resize', function () {
getPosition();
});
This Pen doesn't use any external CSS resources.