可外掛於jqeury
$.markPostion(targetObj,'top'/'bottom',0,'left'/'right',50);
// jquery 1.2.6
function _Position(obj,xtype,x,ytype,y){
this._computes = {
'top':{'postion':function(pos){
t = $(pos.scrollObj).scrollTop();
nt = parseInt($(pos.obj).css('top').replace('px',''));
$(pos.obj).css('top',( t - pos.lasty + nt ) +'px' );
pos.lasty = t;}
},'bottom':{'postion':function(pos){
t = $(pos.scrollObj).scrollTop();
$(pos.obj).css('bottom',( pos.lasty - t + pos.y ) +'px' );
pos.lasty = t;}
},'left':{'postion':function(pos){
t = $(pos.scrollObj).scrollLeft();
nt = parseInt($(pos.obj).css('left').replace('px',''));
$(pos.obj).css('left',( t - pos.lastx + nt ) +'px' );
pos.lastx = t;}
},'right':{'postion':function(pos){
t = $(pos.scrollObj).scrollLeft();
$(pos.obj).css('right',( pos.lastx - t + pos.x ) +'px' );
pos.lastx = t;}
}};
this.obj = obj;
this.xtype = (xtype ? xtype : 'left');
this.x = (x ? x : 0) ;
this.lastx = 0;
this.ytype = (ytype ? ytype : 'top');
this.y = (y ? y : 0) ;
this.lasty = 0;
this.scrollObj = $(window)?$(window):$(document);
this.xcompute = this._computes[this.xtype];
this.ycompute = this._computes[this.ytype];
_Position.prototype.init = function(){
$(this.obj).css('position','absolute').css(this.xtype,this.x+'px').css(this.ytype,this.y + 'px');
this.xcompute.postion(this);
this.ycompute.postion(this);
};
_Position.prototype.postion = function(){
this.xcompute.postion(this);
this.ycompute.postion(this);
};
}
function markPostion(obj,ytype,y,xtype,x ){
var top = new _Position(obj,xtype,x,ytype,y );
top.init();
$(top.scrollObj).scroll(function(){
top.postion();
}).resize(function(){
top.postion();
});
}
$.extend({
'markPostion':markPostion
});
測試:
t1 = $('');
$(t1).append('textA111!!!');
$(t1).css('background-color','#00ff00');
$(document.body).append($(t1));
markPostion(t1);
$.markPostion($('#testC1'),'top',0,'right',50);
