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 <!-- ME PERSIGUE UN BANNER!!! -->
<DIV style="top: 423px; display: block; " id="floatLayer"> bannerStart(815,14,120);
<!-- fin de ME PERSIGUE UN BANNER!!! -->
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.