Where am I ?

by AndreaLigios

HTML

<div id="a"><span id="b">WHERE AM I?</span>
</div>
<div id="tall">&nbsp;</div>
<pre></pre>

CSS

html {
    border:1px solid red;
    padding:2px
}
body {
    border:4px solid blue;
    padding:8px
}
#a {
    padding:16px
}
#b {
    background:yellow
}
pre {
    position:fixed;
    left:15em;
    right:1em;
    top:1em
}
#tall {
    height:2000px
}

JavaScript

function position(el) {
    for (var pos = [0, 0]; el; el = el.offsetParent) {
        pos[0] += el.offsetLeft - el.scrollLeft;
        pos[1] += el.offsetTop - el.scrollTop;
    }
    return pos;
}

var pre = document.querySelector('pre');
var b = document.querySelector('#b');
window.onscroll = function () {
    var r = b.getBoundingClientRect();
    pre.innerHTML = "position(): " + JSON.stringify(position(b)) +
        "\nclientRect: {" +
        "\n  left:  " + r.left +
        "\n  top:   " + r.top +
        "\n  right: " + r.right +
        "\n  bottom:" + r.bottom +
        "\n  width: " + r.width +
        "\n  height:" + r.height +
        "\n}";
}
window.onscroll()