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.
