IE issue regarding pageYOffset & offsetTop

[snakehill]

I created a piece of code for a cross-brower/cross-device solution for locking a div on a custom vBulletin page. The div locks and scrolls along with the page scrolling as soon as it's reached.

To do this, I make use of another div that is on the same height as the div that needs to lock and scroll along. Also, no fixed position is used because mobile behavior would make the div disappear completely. It's not the prettiest solution, but at least it seems the most potential as a cross-browser and device solution.

However, when adding it, it works in all majors browsers and on platforms including iOS and Android, but it does not work in IE. For some mysterious reason, IE does not seem to be able to get the pageYOffset and/or offsetTop values.

<script type="text/javascript">
window.onscroll = function (e) {
var basediv = document.getElementById('basediv').offsetTop;
var setdiv = document.getElementById('setdiv');
 if (window.pageYOffset < basediv) {
 setdiv.style.top = "0px";
 } 
 else {
 setdiv.style.top = window.pageYOffset - basediv + "px";
 }
}
</script>

See the pageYOffset & div.offsetTop being called for onscroll link has been removed.

Thanks in advance for the help!!

[Logic Ali]

Originally Posted by snakehill

For some mysterious reason, IE does not seem to be able to get the pageYOffset and/or offsetTop values.

The fact that your demo shows it as undefined should have hinted that it might be worth Googling the issue. Only IE9+ supports it.

Math.max(document.documentElement.scrollTop, document.body.scrollTop);

[vwphillips]

window.onscroll = function (e) {
var basediv = document.getElementById('basediv').offsetTop;
var setdiv = document.getElementById('setdiv');
var top=getScroll()[1];
 if (top < basediv) {
 setdiv.style.top = "0px";
 }
 else {
 setdiv.style.top = top - basediv + "px");
 }
}

function getScroll(){
 if (window.innerHeight){
  return [window.pageXOffset,window.pageYOffset];
 }
 else if (document.documentElement.clientHeight){
  return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
 }
 return [document.body.scrollLeft,document.body.scrollTop];
}

[snakehill]

Originally Posted by Logic Ali

The fact that your demo shows it as undefined should have hinted that it might be worth Googling the issue. Only IE9+ supports it.

Unfortunately the page was tested in IE8, 9 and 10 and each of them called an undefined on the linked page.

Also, scrollTop (both the javascript and its jquery varient) for some reason gave values that were terribly off. Really seems like something from vBulletin conflicting with it.

But.. I ended up adding getBoundingClientRect for whichever browser and device supports that. Works like a charm and no conflicting with vBulletin so we're all good now.

Thanks for the help though, Logic Ali and vwphillips.

PS: I edited the main post but it disappeared (that new 'Moderated Threads and Posts' system is waaaay heavy). When it's approved again, could anyone mark this as resolved for me? Thanks!

[Logic Ali]

Originally Posted by snakehill

Unfortunately the page was tested in IE8, 9 and 10 and each of them called an undefined on the linked page.

Try using a STRICT doctype.