fix.js

/* 
只依据纵向处理固定, 不支持已fixed的的dom, static to fixed
*/
var FixedLayer = function(id){
	
	if(!id){ return; }
	this.dom = document.getElementById(id);
	if(!this.dom){ return; }
	
	//设置固定点 只支持小于等与原位
	var origiPos = this.getPOS();
	this.origiPosX = origiPos.x;
	this.origiPosY = origiPos.y;
	this.startPosY = 0;
	this.BisIE6 = this.isIE6();
	this.isFix = false;
	this.marginTop = parseInt(this.getStyle(this.dom, 'marginTop'), 10);
	this.marginBottom = parseInt(this.getStyle(this.dom, 'marginBottom'), 10);
	this.marginLeft = parseInt(this.getStyle(this.dom, 'marginLeft'), 10);
	this.opacity = 100;
	this.bind();
	
}

FixedLayer.prototype = {
	
	getPOS: function(node){
		var el = this.dom;
		if(arguments.length == 1){ el = node; }
		var	x = el.offsetLeft, 
			y = el.offsetTop,
			scrollLeft = 0,
			scrollTop = 0;
		el = el.offsetParent;
		
		while (el) {
			x += el.offsetLeft;
			y += el.offsetTop;
			el = el.offsetParent;
		}
		
		el = this.dom;
		while ((el = el.parentNode) && el.tagName) {
			scrollTop = el.scrollTop;
			scrollLeft = el.scrollLeft;
			if (scrollTop || scrollLeft) {
				x -= scrollLeft;
				y -= scrollTop;
			}
		}	
		
		return {'x': x, 'y': y };
	},
	
	getDocScroll: function(){
		
		var	scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft),
			scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
		
		return { top: scrollTop, left: scrollLeft };
	},
	
	getSize: function(){
		var	w = this.dom.offsetWidth;
			h = this.dom.offsetHeight;
		
		return { width: w, height: h };
	},
	
	//占位
	place: function(){
		function insertAfter(newElement, targetElement) {
			var parent = targetElement.parentNode;
			if(parent.lastChild == targetElement) {
				parent.appendChild(newElement);
			} else {
				parent.insertBefore(newElement, targetElement.nextSibling);
			}
		}
		var size = this.getSize();
		this.pose = document.createElement('DIV');
		this.pose.style.width = size.width + 'px';
		this.pose.style.height = size.height + 'px';
		this.pose.style.marginTop = this.marginTop + 'px';
		this.pose.style.marginBottom = this.marginBottom + 'px';
		insertAfter(this.pose, this.dom);
		
	},
	
	isIE6: function(){
		var s = "MSIE", u = navigator.userAgent, i = -1; 
		if ((i = u.indexOf(s)) >= 0) {
			var v = parseFloat(u.substr(i + s.length)); 
			if(v == 6){ return true; }
		}
		
		return false;
	},
	
	getStyle: function(obj, attribute){     
		return obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj,false)[attribute];
	},
	
	attachEvent: function(o, e, func){
		if(window.addEventListener){ o.addEventListener(e, func, false); }
		else if(window.attachEvent){ o.attachEvent('on' + e, func); }
	},
	
	fix: function(){
		var pos = this.getPOS();
		if(!this.BisIE6){
			this.dom.style.position = 'fixed';
			this.dom.style.top = this.startPosY - this.marginTop + 'px';
			this.dom.style.left = this.origiPosX - this.marginLeft + 'px';
		}else{
			this.dom.style.position = 'absolute';
		}
		this.place();
		this.isFix = true;
	},
	
	detect: function(){
		var pos = this.getPOS();
		var ofx = this.getDocScroll();
		
		if(!this.isFix && pos.y <= this.startPosY){
			this.fix();
		}
		if(this.isFix){
			if(ofx.top < this.origiPosY){ this.rep(); }
			if(this.BisIE6){ 
				this.dom.style.top = this.startPosY + ofx.top - this.marginTop + 'px'; 
				var _this = this;
				if(this.delay){ clearTimeout(this.delay); }
				if(this.timer){ clearInterval(this.timer); }
				this.opacity = 0;
				this.dom.style.filter = 'Alpha(opacity=0)';
				this.delay = setTimeout( function(){ _this.smooth(); }, 200 );
			}
			var offsetLeft = this.BisIE6 ? ofx.left : 0;
			this.dom.style.left = this.getPOS(this.pose).x + offsetLeft - this.marginLeft + 'px';
		}
	},
	
	smooth: function(){
		var _this = this;
		this.timer = setInterval(function(){
			_this.opacity += 10;
			_this.opacity = _this.opacity > 100 ? 100 : _this.opacity;
			_this.dom.style.filter = 'Alpha(opacity='+ _this.opacity +')';
			if(_this.opacty == 100){ clearInterval(_this.timer); }
		},15);
	},
	
	rep: function(){
		this.dom.style.position = 'static';
		if(this.pose){
			this.pose.parentNode.removeChild(this.pose);
		}
		this.isFix = false;
	},
	
	bind: function(){		
		var _this = this;
		this.attachEvent(window, 'scroll', function(){ _this.detect(); });
		this.attachEvent(window, 'resize', function(){ _this.detect(); });
	}	
}