Div que se mueve junto con la barra de desplazamiento

berlusconi · #1 (**permalink**) 10/08/2010, 22:14

Hola.
Primer tema que creo. El tema es el siguiente:

Lo que estoy buscando es un banner que se mueve junto con la barra de dezplazamiento. Pero el problema es que quiero que comienze a deslizarce (el div) a partir de cierta posición.
Yo tengo todo el código para que se desplaze pero lo hace partiendo de determinado margen del body. Si yo amplío ese margen, luego al mover la barra de desplazamiento del navegador permanecerá ese margen y no se verá por completo.

Les paso los códigos. Supongo yo que se soluciona del js, pero no entiendo nada de js.

Este es el html

Código HTML:

Ver original<BODY>
    <div id="head"></div>
<div id="cuepo">    
  <div id="content"></div>
  <!-- ME PERSIGUE UN BANNER!!! -->
  <DIV style="top: 423px; display: block; " id="floatLayer">
    FDSFDSFDSFDSFDS    </DIV>
</div>
<script>
bannerStart(815,14,120);
</script>
  <!-- fin de ME PERSIGUE UN BANNER!!! -->
</BODY>

el css sería esto (es algo asi nomas para guia)

Código CSS:

Ver original#cuerpo {
    background-color:#0066CC;
    width: 900px;
}
#floatLayer {
    position: absolute;
    height:600px;
    width:160px;
    left:825px;
    top:600px;
    bottom:50px;
    z-index: 5;
    border: 0;
    background-color: #00CC66;
}
#content {
    background-color: #CCCCCC;
    height: 800px;
    width:500px;
    margin:10px 10px 10px 10px;
    position:relative;
}
#head{
    background-color: #006699;
    height: 400px;
    width: 900px;
    position: absolute;
    z-index: 10;
}

y el script que lo tengo en una hoja de js es:

Código Javascript:

Ver original// JavaScript Document
 
var leftMargin = 0;
var bannerWidth = 0;
var topMargin = 0;
 
var slideTime = 1200;
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
var ie6st = (document.documentElement && document.documentElement.clientWidth);
var bannerEnabled = true;
var bannerTimer = 0;
 
function bannerActivar() {
    bannerEnabled = true;
    bannerTimer = window.setInterval("main()", 10)
    
    if (ie4) document.all.floatLayer.style.display="block"
    if (ns4) document.floatLayer.display="block";
    if (ns6) {
        var fl = document.getElementById("floatLayer")
        fl.style.display="block";
        if (!fl.style.top) 
            fl.style.top = document.defaultView.getComputedStyle(fl,null).getPropertyValue("top");
    }
}
 
function bannerDesactivar() {
    bannerEnabled = false;
    if (bannerTimer) {
        window.clearInterval(bannerTimer); 
        bannerTimer = 0;
    }
    if (ie4) document.all.floatLayer.style.display="none"
    if (ns4) document.floatLayer.display="none";
    if (ns6) document.getElementById("floatLayer").style.display="none";
}
 
function layerObject(id) {
    if (ns6) {
        this.obj = document.getElementById(id).style;
    }
    else if(ie4) {
        this.obj = document.all[id].style;
    }
    else if(ns4) {
        this.obj = document.layers[id];
    } 
    return this.obj;
}
function layerSetup() {
    floatLyr = new layerObject('floatLayer');
    bannerActivar();
}
function floatObject() {
    if (ns4 || ns6) {
        findHt = window.innerHeight;
    } else if(ie4) {
        findHt = document.body.clientHeight;
    }
} 
function main() {
    if (bannerEnabled) {    
        if (ns4) {
            this.currentY = document.layers["floatLayer"].top;
            this.scrollTop = window.pageYOffset;
        }
        else if(ns6) {
            this.currentY = parseInt(document.getElementById('floatLayer').style.top);
            this.scrollTop = scrollY;
        } else if(ie6st) {
            this.currentY = floatLayer.style.pixelTop;          
            this.scrollTop = document.documentElement.scrollTop         
        } else if(ie4) {
            this.currentY = floatLayer.style.pixelTop;          
            this.scrollTop = document.body.scrollTop;           
        }
        mainTrigger();
    }
}
function mainTrigger() {
    var newTargetY = this.scrollTop + this.topMargin;
 
    if ( this.currentY != newTargetY ) {
        if ( newTargetY != this.targetY ) {
            this.targetY = newTargetY;          
            floatStart();
        }
        animator();
   }
}
function floatStart() {
    var now = new Date();
    this.A = this.targetY - this.currentY;
    this.B = Math.PI / ( 2 * this.slideTime );
    this.C = now.getTime(); 
    if (Math.abs(this.A) > this.findHt) {
        this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt;
        this.A = this.A > 0 ? this.findHt : -this.findHt;
    }
    else {
        this.D = this.currentY;
    }
}
function animator() {
    var now = new Date();
    var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D;
    newY = Math.round(newY);
    if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
        if ( ie4 )document.all.floatLayer.style.pixelTop = newY;
        if ( ns4 )document.layers["floatLayer"].top = newY;
        if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px";
    }
}
function bannerStart(left_margin, top_margin, width) {
    leftMargin = left_margin;
    topMargin = top_margin;     
    bannerWidth = width;
        
    if(ns6||ns4) {
        pageWidth = innerWidth - 16;
        pageHeight = innerHeight;
    }
    else if(ie4) {
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
    layerSetup();
    floatObject();
    checkWidth();
    window.onresize = checkWidth;
}
 
function checkWidth() {
    if(ns6||ns4) {
        pageWidth = innerWidth - 16;
    }
    else if(ie4) {
        pageWidth = document.body.clientWidth;
    }
    if (pageWidth >= (leftMargin + bannerWidth)) 
        bannerActivar();
    else
        bannerDesactivar();
}

La idea sería.
un div cabecera que se ve completo
debajo de eso un div que contiene otros dos. el de la derecha se mueve con la barra por debajo del head (lo hice como alternativa, pero no es lo que busco). pero yo lo que quiero es que el movimiento del div derecho sea en relacion al div que contiene los otros dos (o sea el que está abajo del div)

Les agradecería si me ayudan y cuanto antes mejor.
Saludos.

dggluz · #2 (**permalink**) 10/08/2010, 23:09

La verdad que no entendí nada de lo que quieres, pero creo que con CSS (position: fixed, en el #floatLayer) podrías obtener algo parecido a un "div que se mueve junto con la barra de desplazamiento". Espero haber sido de ayuda. ¡Suerte!

Panino5001 · #3 (**permalink**) 11/08/2010, 01:17

Fijate si te sirve: http://www.forosdelweb.com/3118011-post11.html

berlusconi · #4 (**permalink**) 11/08/2010, 08:46

Cita:

Iniciado por Panino5001

Fijate si te sirve: [url]http://www.forosdelweb.com/3118011-post11.html[/url]

Exactamente eso. Pero lo que necesito es que cuando la barra está arriba del todo, el div que se mueve esté en una posición fija. Al bajar la barra por la posición donde estaba ese div se deslize como en tu ejemplo. Es decir, el movimiento de tu div, está en relación al body, pero quiero que sea en relación a otro div.