Como Hago esto

[riven]

Puede alguien ayudarme con esto? http://estudieenelexterior.com.co/new/scripts/contenidos/cnt.php?page=33&i=3

Como se hace esta ventana que se desplaza.

Gracias de antemano

[Perr0]

tendrás que investigar por evento onscroll

Código Javascript:

window.onscroll...
 

luego esta función

Código Javascript:

if(window.pageYOffset)
    y=window.pageYOffset
    else
    y=Math.max(document.body.scrollTop,document.documentElement.scrollTop);
 

el window.pageYOffset es para FF y otros en cambio, document.body.scrollTop,document.documentElement.s crollTop son dos funciones para IE que si no funciona una lo hará la otra y te saca el máximo, con ello obtendras el tope y incluido el scroll.

como ejemplo si tienes una ventana de 400px de alto, siempre sera ese el valor "y" si no tubiera un scroll, si la ventana tienen 1000px de alto, a medida que muevas el scroll hacia abajo y irá en aumento.

ahora sólo falta un div con los estilos position absolute y top 0 para que quede pegada arriba.

luego cuando detecte el movimiento de scroll tu le haces referenfia al div y le cambias el top del style.

si lo dejas asi, se vera horrible y tiriton, tendras que agregarle un setTimeout cosa de esperar medio segundo (500) y luego mover la ventana con un bucle que pare cuando alcance el top "y", tendras que ocupar otro setTimeout para graduar los tiempos de demora, asi notaras una aceleración y desaceleración, asignandole una variable para detenerla en algun momento.

bueno esa es la idea, ahora a googlear.

busca ejemplos basicos y luego empieza a retocarlo mas.

salu2

[riven]

gracias por tu ayuda, la verdad se muy poco de java, pero voy a intentarlo.

Saludos

[riven]

No lo he logrado, talvez requiero un poco mas de ayuda

[Perr0]

deberas tener esto

Código Javascript:

<script>
window.onscroll=function(){
    if(window.pageYOffset)
    y=window.pageYOffset
    else
    y=Math.max(document.body.scrollTop,document.documentElement.scrollTop);
    
    setTimeout("posdiv("+y+")",400);
}
function posdiv(y)
{
    capa=document.getElementById("prueba");
    capa.style.top=y+"px";
}
</script>
 

Código CSS:

<style>
#prueba{
    width:200px;
    height:200px;
    border:1px solid black;
    background-color:#80FF80;
    padding:5px;
    position:absolute;
    top:0;
    z-index:9999;
}
</style>
 

tener además un div con id "prueba" que va a ser el recuadro a moverse

lo colocas en una pagina y te funcionará

probado en ie, ff, chrome, opera

tu vez que le cambias o le adaptas...

salu2

[Perr0]

te dejo el ejemplo...

http://perr0.netii.net/exs/divmoving/

se me habia caido la página =(

con esto debieras estar ok

me desconecto

salu2

[riven]

Super ya logre que me funcionara, solo me falta la instrucción para poderlo cerrar,
muchas gracias por tu ayuda