Capa fija con CSS-JScript

Se trata de una capa con efecto fade que permanece en primer plano sin afectarle la posición de las barras de scroll. Está realizada en  CSS y JavaScript. Se han añadido unas expresiones para corregir algunos fallos en IE5x, IE6x, etc.

El código es:

<html>
<head>
<style type=”text/css”>

<!–
body {
  background:#EFEFEF url(‘bg’) fixed;
}

#fixelem {
  position:fixed;
  _position:absolute;
  _width:expression(eval(document.body.clientWidth)+0+’px’);
  _height:expression(eval(document.body.clientHeight)+0+’px’);
  _top:expression(eval(document.body.scrollTop)+0+’px’);
  top:0;
  left:0;
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background:#707070;
  overflow:hidden;
  filter:alpha(opacity=0);-khtml-opacity:0;-moz-opacity:0;opacity:0;
}

//–>
</style>
<script language=”javascript” type=”text/javascript”>
<!– Copyleft 2006 – 2009, ScriptShow – scriptshow@hotmail.com –>
<!– Feel free to use if you leave this header intact! –>
<!–
step=2;
opac=0;
timer=null;

function ImgsFader(){
fadeEl=document.getElementById(“fixelem”);
opac+=step;
if(fadeEl.filters){
fadeEl.filters.alpha.opacity=opac;
}
else{
fadeEl.style.KHTMLOpacity=(opac/100)-0.001;
fadeEl.style.MozOpacity=(opac/100)-0.001;
fadeEl.style.opacity=(opac/100)-0.001;
}
if(opac==70){clearTimeout(timer)}
else{timer=setTimeout(“ImgsFader()”,10)}
}
//–>
</script>
</head>
<body onload=”ImgsFader()”>
<span id=”fixelem” onclick=”this.style.display=’none'”><center><h2>Este texto siempre estará en la parte superior de la página</h2><br><img src=”img.gif” width=”200″ height=”200″></center></span>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
</body>
</html>

Espero sea útil.

Capa fija con CSS-JScript

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s