menu flotante efecto ascensor

wolfmoon · #1 (**permalink**) 10/10/2009, 06:42

Bueno pues me gustaria saber como hacer el efecto del menu de esta web:

http://www.dr84.com/

Estuve mirando en san google y solo encuentro informacion de como dejar fija una capa, pero no encuentro nada sobre como poder hacer para que baje igual que el de esa pagina.

Gracias

Adler · #2 (**permalink**) 10/10/2009, 06:59

Hola

Aquí encontrarás lo que buscas

Suerte

wolfmoon · #3 (**permalink**) 10/10/2009, 07:35

Muchas gracias, llevaba horas buscando algo asi macho jeje... te debo una...

wolfmoon · #4 (**permalink**) 10/10/2009, 07:48

Una duda, al poner el doctype con la URI me deja de funcionar:

Asi me funciona:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Asi no:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Hay alguna diferencia? Nunca he entendido estas declaraciones...

zerokilled · #5 (**permalink**) 10/10/2009, 08:04

indica con cual script te deja de funcionar.

Adler · #6 (**permalink**) 10/10/2009, 08:07

Hola

En vez de Transitional prueba con Strict

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>

Algo de lectura

Suerte

wolfmoon · #7 (**permalink**) 10/10/2009, 08:09

el scrip es este:

Código:

<script type="text/javascript">

/*
Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
var startX = 25,
startY = 800;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>

Es un menu que se desplaza con el scroll con efecto de ascensor.

wolfmoon · #8 (**permalink**) 10/10/2009, 08:10

Cita:

Iniciado por Adler

Hola

En vez de Transitional prueba con Strict

Algo de lectura

Suerte

Si si, he probado con todos, y con el unico que me funciona es con el que digo...

zerokilled · #9 (**permalink**) 10/10/2009, 08:12

debe ser por el document.body en el script. intenta reemplazando todas las ocurrencias de body por documentElement de modo que te queda asi document.documentElement.

wolfmoon · #10 (**permalink**) 10/10/2009, 08:21

Nada, que no quiere, solo me funciona con esta declaracion

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Panino5001 · #11 (**permalink**) 10/10/2009, 08:28

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>

wolfmoon · #12 (**permalink**) 10/10/2009, 09:01

Graciaas, funciona perfectamente....