Code Review - Where will this .positionTop() function fail?

http://codereview.stackexchange.com/q/7785/9137

HTML

<div id="static" class="offset">0</div>
<div id="static2" class="offset">0</div>
<div id="static-wrapped-static"><br /><div class="offset">0</div></div>
<div id="absolute" class="offset">0</div>
<div id="relative" class="offset">0</div>
<div id="fixed-side" class="offset">0</div>
<div id="fixed-top" class="offset">0</div>
<div id="fixed-bottom" class="offset">0</div>
<div style="position: relative;"><div id="relative-wrapped-absolute"><div class="offset">0</div></div></div>

<div id="grid"><div class="grid-line">10</div></div>

CSS

body {padding-left: 12px;}

#absolute {
    top: 100px;
    position: absolute;
}

#relative {
    top: 150px;
    position: relative;
}

#fixed-side {
    right: 0;
    position: fixed;
}

#fixed-top {
    left: 50%;
    position: fixed;
    top: 0;
}

#fixed-bottom {
    left: 50%;
    position: fixed;
    bottom: 0;
}

#relative-wrapped-absolute {
    top: 8px;
    position: relative;
}

#relative-wrapped-absolute div {
    position: absolute;
    top: 20px;
}

.offset {
    border: 1px solid black;
}

#grid {
    height: 100%;
    left: 0;
    position: absolute;
    top: 1px;
    width: 100%;
    z-index: -1;
}

.grid-line {
    border-bottom: 1px solid lightgray;
    font-size: 8px;
    height: 9px;
    line-height: 20px;
}

JavaScript

function documentOffsetTop(elem) {
   return elem.offsetTop + ( elem.offsetParent ? documentOffsetTop(elem.offsetParent) : 0 );
}

var line = $( '.grid-line' )[0],
    grid = document.getElementById( 'grid' );

for( var index = 2; index < 100; index++ ) {
    var copy = line.cloneNode();
    copy.textContent = ( index * 10 );
    grid.appendChild( copy );
};
     
var offset = document.getElementById( 'absolute' );
offset.textContent = 'absolute: ' 
    + documentOffsetTop(offset ) + ', $' 
    + $( offset ).offset().top;

offset = document.getElementById( 'static' );
offset.textContent = 'static: ' 
    + documentOffsetTop(offset ) + ', $' 
    + $( offset ).offset().top;

offset = document.getElementById( 'static2' );
offset.textContent = 'static: ' 
    + documentOffsetTop(offset ) + ', $' 
    + $( offset ).offset().top;

offset = document.getElementById( 'relative' );
offset.textContent = 'relative: ' 
    + documentOffsetTop(offset ) + ', $' 
    + $( offset ).offset().top;

offset = document.getElementById( 'fixed-side' );
offset.textContent = 'fixed/absolute (side): ' 
    + documentOffsetTop(offset ) + ', $' 
    + $( offset ).offset().top;

offset = document.getElementById( 'fixed-top' );
offset.textContent = 'fixed/absolute (top): ' 
    + documentOffsetTop(offset) + ', $' 
    + $( offset ).offset().top;

offset = document.getElementById( 'fixed-bottom' );
offset.textContent = 'fixed/absolute (bottom): ' 
    + documentOffsetTop(offset) + ', $' 
    + $( offset ).offset().top;

offset =$( '#relative-wrapped-absolute div' )[0];
offset.textContent = 'absolute/relative/static (absolute/relative wrapped): ' 
    + documentOffsetTop(offset) + ', $' 
    + $( offset ).offset().top;

offset = $( '#static-wrapped-static div' )[0];
offset.textContent = 'static (static wrapped): ' 
    + documentOffsetTop(offset)  + ', $' 
    + $( offset ).offset().top;