I.E css position problem when scrolling

Question

Hi Everyone,

I have written a scrollSpy function that detects user activity as they scroll up and down on a webpage.

<script type="text/javascript">
function yPos() {
  var pos = 0;
  if( typeof( window.pageYOffset ) == 'number' ){
    //Netscape compliant
    pos = window.pageYOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    pos = document.body.scrollTop;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    pos = document.documentElement.scrollTop;
  }
  return pos;
}

window.onscroll = function(){
  var scrollPos  = yPos(), goTopElem = document.getElementById('scroll'), docBody = document.getElementsByTagName('body')[0];
  if(goTopElem && scrollPos  < 500 )                // user has scrolled up
     goTopElem.parentNode.removeChild(goTopElem);   // remove go to top link

  else if(scrollPos  > 500 && !goTopElem){ 
    var newDiv = document.createElement('DIV'), newLink = document.createElement('A'), txt = document.createTextNode('[back to top]'); 

     newLink.setAttribute('href','javascript:scroll(0,0);');
     newLink.appendChild(txt);   
     newDiv.setAttribute('id','scroll');  
     newDiv.appendChild(newLink);
     docBody.appendChild(newDiv);
   }
 } 
 </script> 
 <style type="text/css"> 
#scroll {
  position:fixed;   
  right: 0px; 
  bottom: 0px;
  display: block;
}  
  </style>

The problem is with internet explorer, when scrolling down a link should appear at the bottom right corner of your window - but this does not happen. Please help.

Answer 1

If you are talking IE6 or an older IE7 then position: fixed is not supported. If not, please update question with more specifics about which version of IE you are talking about.