Probá algo como esto:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style>
#pp{ width:100px; height:200px; background-color:orange; position:absolute;}
</style>
<script>
function transicion3(curva,ms,callback){
window.globalIntervaloN=1;
this.ant=0.01;
this.done_=false;
var _this=this;
this.start=new Date().getTime();
this.init=function(){
setTimeout(function(){
if(!_this.next()){
callback(1);
_this.done_=true;
window.globalIntervaloN=0;
return;
}
callback(_this.next());
_this.init();
},13);
}
this.next=function(){
var now=new Date().getTime();
if((now-this.start)>ms)
return false;
return this.ant=curva((now-this.start+.001)/ms,this.ant);
}
}
function desacelerado(p){
var maxValue=1, minValue=.001, totalP=1, k=.25;
var delta = maxValue - minValue;
var stepp = minValue+(Math.pow(((1 / totalP) * p), k) * delta);
return stepp;
}
function ejecutar2(obj,efectos,ms,curva){
var t=new transicion3(
curva,ms,function(p){
for (var i=0;efectos[i];i++){
if(efectos[i].fin<efectos[i].inicio){
var delta=efectos[i].inicio-efectos[i].fin;
obj.style[efectos[i].propCSS]=(efectos[i].inicio-(p*delta))+efectos[i].u;
if(efectos[i].propCSS=='opacity'){
obj.style.zoom=1;
obj.style.MozOpacity = (efectos[i].inicio-(p*delta));
obj.style.KhtmlOpacity = (efectos[i].inicio-(p*delta));
obj.style.filter='alpha(opacity='+100*(efectos[i].inicio-(p*delta))+')';
}
}
else{
var delta=efectos[i].fin-efectos[i].inicio;
obj.style[efectos[i].propCSS]=(efectos[i].inicio+(p*delta))+efectos[i].u;
if(efectos[i].propCSS=='opacity'){
obj.style.zoom=1;
obj.style.MozOpacity = (efectos[i].inicio+(p*delta));
obj.style.KhtmlOpacity = (efectos[i].inicio+(p*delta));
obj.style.filter='alpha(opacity='+100*(efectos[i].inicio+(p*delta))+')';
}
}
}
});
t.init();
t=null;
}
var globalCola2=[];
var globalIntervaloId2=null;
function encolar2(f){
globalCola2.push(f);
if(!globalIntervaloId2){
globalIntervaloId2=setInterval(function(){
if(!globalCola2.length){
clearInterval(globalIntervaloId2);
globalIntervaloId2=null;
}
if(!window.globalIntervaloN){
var ae=globalCola2.shift();
if(typeof ae=='function')
ae();
}
},13);
}
}
function fx2(obj,efectos,ms,cola,curva){
if(!window.globalIntervaloN)
ejecutar2(obj,efectos,ms,curva);
else {
if(cola)
return encolar2(function(){ejecutar2(obj,efectos,ms,curva);});
else
return;
}
}
function acomodar(){
var desp=(document.documentElement.scrollTop+document.body.scrollTop) || self.pageYOffset;
if(desp>=50){
fx2($('pp'),[
{'inicio':parseInt(estilo('pp','top')) || 0,'fin':desp+50,'u':'px','propCSS':'top'}
],500,false,desacelerado);
}else{
fx2($('pp'),[
{'inicio':parseInt(estilo('pp','top')) || 0,'fin':50,'u':'px','propCSS':'top'}
],500,false,desacelerado);
}
}
function $(x){return document.getElementById(x);}
function estilo(id,prop){
if(window.getComputedStyle){
return document.defaultView.getComputedStyle(document.getElementById(id),null).getPropertyValue(prop);
}else{
var re = /(-([a-z]){1})/g;
if (prop == 'float') prop = 'styleFloat';
if (re.test(prop)) {
prop = prop.replace(re, function () {
return arguments[2].toUpperCase();
});
}
return document.getElementById(id).currentStyle[prop] ? document.getElementById(id).currentStyle[prop] : null;
}
}
setInterval(acomodar,600);
</script>
</head>
<body>
<div id="pp"></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>