Fixed Positioning Done Right

ALL OF THE FOLLOWING JAVASCRIPT AND CSS ABOUT FIXED POSITIONING SEEMS TO WORK ON ALL PLATFORMS AND JUST ABOUT ALL BROWSERS, AS LONG AS JAVASCRIPT IS TURNED ON.

JDenny of http://dev.jdenny.co.uk/css/ie_fixed.html (link no longer working) is the css and javascript genius who came up with the following brilliant CSS and Javascript fixed positioning code and put it on the Web to help those of us that were stumped trying to figure out good fixed positioning codes. Thanks a million JDenny! This has to be the most ingenious DHTML using CSS and Javascript I've ever seen! (Note: The b.gif file in div2 should be left as is, but you do NOT need a b.gif file: it is a dummy name just to keep the code working.)

<style type="text/css">

body {background-image:url(carpet.gif);background-attachment:fixed;} /*background */

#fixed {position: fixed; /*this is the stuff that will NOT scroll when scrolling--it stays fixed */

   border:1px solid black;

   height:660px;

   top: 0px;

   width: 275px;

   left: 1em;

   background-color:white;

   text-align: left;

   margin: 0 25px 0 0;

   padding:10px;

   position: expression("absolute");

   top: expression(eval(document.body.scrollTop)+0);}

#div2 {background: url('b.gif'); /*this is the stuff that WILL scroll when using scrollbar */

   background-attachment: fixed;

   background-position: expression((calculateBgX(this))+"px "+

   (calculateBgY(this))+"px");}

</style>

<SCRIPT LANGUAGE="JavaScript">

<!--

function calculateBgX(oElement) {return document.body.scrollLeft - getOffsetLeft(oElement);}

function calculateBgY(oElement) {return document.body.scrollTop - getOffsetTop(oElement);}

function getOffsetTop(oElement) {var iResult= oElement.offsetTop;

  while (oElement.offsetParent)

  {oElement = oElement.offsetParent;iResult += oElement.offsetTop;}

  return iResult;}

function getOffsetLeft(oElement) {var iResult= oElement.offsetLeft;

  while (oElement.offsetParent)

  {oElement = oElement.offsetParent;iResult += oElement.offsetLeft;}

  return iResult;}

// -->

</script>