Fixed Position in any browser

Gabarieko 0 Tallied Votes 339 Views Share

This is a javascript code to fix any element in any browser.
Simply add "fixed" to the classes of the desired element.

Examples:

<div class="fixed">FIXED</div>
<div class="someClass fixed">FIXED</div>

Though it's a little rough when scrolling I hope it will do the job.

The way it works:
- By using an event listener ("onscroll") the script calls the function which aligns the elements absolutely but relative to the window borders

Some of the functions are copied from the Internet simply to avoid the annoying writing.

// Function to get the amount of pixels scrolled
//    Copied from the Internet
function getScrollXY() {
   var scrOfX = 0, scrOfY = 0;
   if( typeof( window.pageYOffset ) == 'number' ) {
     //Netscape compliant
     scrOfY = window.pageYOffset;
     scrOfX = window.pageXOffset;
   } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
     //DOM compliant
     scrOfY = document.body.scrollTop;
     scrOfX = document.body.scrollLeft;
   } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
     //IE6 standards compliant mode
     scrOfY = document.documentElement.scrollTop;
     scrOfX = document.documentElement.scrollLeft;
   }
   return [ scrOfX, scrOfY ];
}

// Function to get the Elements with class "fixed"
//    It is the same as most function "getElementsByClass" found on the net
//    The only difference is that it does not accept parameters,
//    they are hard-coded instead

function getFixedElements(){
   var classElements = new Array();
   var node = document;
   var els = node.getElementsByTagName('*');
   var pattern = new RegExp("(^|\\s)"+"fixed"+"(\\s|$)");
   for (i = 0, j = 0; i < els.length; i++) {
     if (pattern.test(els[i].className) ) {
       classElements[j] = els[i];
       j++;
     }
   }
   return classElements;
}

// The function which scrolls the elements
// to their initial position (relative to the window borders)
// after the page has been scrolled

function maintainFixing(){
   var Elements = getFixedElements();
   var Scrolling= getScrollXY();

   for(ei=0;ei<Elements.length;ei++){
      // Fix the Elements to the y axis
      Elements[ei].style.top = Elements[ei].initialPositionTop + Scrolling[1];
      // Use if you want to fix the elements to the x axis as well
      //Elements[ei].style.left= Elements[ei].initialPositionLeft+ Scrolling[0];
   }
}

// The function to get the absolute position of an element
// Styling the elements with position:... wont interfere

function getElementPosition(obj){
	var curleft = curtop = 0;

   if (obj.offsetParent) {
      do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
      }while(obj = obj.offsetParent);
   }
   return [curleft,curtop];
}

// Get the elements and store their initial position

var Elements = getFixedElements();
for(ei=0;ei<Elements.length;ei++){
   var initPos = getElementPosition(Elements[ei]);
   Elements[ei].initialPositionTop = initPos[1];
   Elements[ei].initialPositionLeft= initPos[0];
}


// Add the event handler to the 'onscroll' event
//    This can be avoided by adding onscroll="maintainFixing()"
//    to the body tag in your HTML

if(typeof window.attachEvent != 'undefined')
   window.attachEvent("onscroll", maintainFixing);
else if(typeof document.addEventListener != 'undefined')
   document.addEventListener('scroll', maintainFixing, false);
else
   window.onscroll = maintainFixing();