Como se hace esta ventana

riven · #1 (**permalink**) 02/04/2011, 12:11

Como se hace la ventana que se desplaza sobre la pagina pricipal, alguno sabe hacerlo?

http://www.estudieenelexterior.com.co/new/scripts/contenidos/cnt.php?page=33&i=3

Saludos y mil gracias de anteamo

GatoGordo · #2 (**permalink**) 02/04/2011, 21:01

Eso se hace en javascript, hay muchos scripts que te hacen ese efecto, solo es cosa de buscarlos. Googlea "javascript ventana deslizante scroll navegador", por ahí debería estar.

Saludos!

riven · #3 (**permalink**) 12/04/2011, 18:07

Gracias por tu ayuda

juan_14nob · #4 (**permalink**) 12/04/2011, 22:30

hacelo con javascript la libreria Jquery tiene muchas funciones para hacer esas cosas..

saludos

saul123 · #5 (**permalink**) 13/04/2011, 06:50

Hola a todos

aqui les dejo un ejemplo de este tipo de ventanas espero que les ayude .

Primero definimos nuestro html.

Código HTML:

Ver original<body>
<div id="container">
<h1>Ejemplo ventana flotante con movimineto</h1>
    <div id="content">
        <div id="box">
        </div>
    
        <div id="vps_fixed_box">
        <h2> Tu compra</h2>
        <div class="box box-grey"><br />
         <p>Camiseta : 300 €</p>
        </div>
        </div>
</div>
    </div>
</div>
</body>[

Despues nuestra css

Código CSS:

Ver originalbody{
    font-family:Arial, Helvetica, sans-serif;
}
#content{
    height:1800px;
    background:#333;
    width:1000px;
    margin:0 auto 0 auto;
}
#container h1{
    
    
    
}
#container h1{
    background:#333;
    height:100px;
    width:1000px;
    color:#FFF;
    font-size:24px;
    margin:0 auto 0 auto;
    text-align:center;
    padding-top:20px;
    
    
    
}
#box{
     
     width:550px;
     height:800px;
     background:url(prueba.jpg) no-repeat;
     float:left;
     margin-left:40px;
 }
 #vps_fixed_box{
     float:left;
     margin-left:650px;
     height:150px;
     width:300px;
     background:#FFF;
     border:#999 solid 2px;
     padding:10px;
 
 }
 #vps_fixed_box h2{
     background:url(euro.jpg) no-repeat;
     height:30px;
     padding-left:40px;
     line-height:30px;
 }

Y por ultimo nuestras funciones con jquery , en la parte que dice var paddingtop=120; al ser la ventana en position absolute esta ventana siempre quedara en la parte superior de nuestra pagina y con esta variante podemos controlar la posición

Código Javascript:

Ver original$(document).ready(function () {
 
   
    // make the vps_fixed_box stay on screen
    var vps_fixed_box = $("#vps_fixed_box");
    
        var wrapper = vps_fixed_box.parent().parent();
        var paddingTop =120;
        var offsetTop = wrapper.offset().top;
        vps_fixed_box.css('position', 'absolute');
        var tweak = 0;
        if (! jQuery.support.cssFloat)
            tweak = 30;
        var bottomPos = wrapper.height() - vps_fixed_box.height() - offsetTop - tweak;
 
        if (bottomPos < 0)
            bottomPos = 0;
 
        $(window).scroll(function () {
            vps_fixed_box.stop();
 
            var pastStart = $(document).scrollTop() > offsetTop;
            var pastTopPos = vps_fixed_box.offset().top > offsetTop;
            var boxFits = vps_fixed_box.outerHeight() < $(window).height();
 
            if ((pastStart || pastTopPos) && boxFits) {
                var newpos = $(document).scrollTop() - offsetTop + paddingTop;
                if (newpos > bottomPos)
                    newpos = bottomPos;
                if ($(document).scrollTop() < offsetTop)
                    newpos = paddingTop;
                vps_fixed_box.animate({top: newpos}, 800);
            }
        });
    
 
})

Nota: no olviden de agregar jquery-1.3.2.min .

Si quieren ver el ejemplo aqui se los dejo tambien Ejemplo funcionando