Bueno, mi idea era hacer una capa que te siguiese al scroll, un poco mejorada.
Como no me gustan los position:absolute, me gusta mas que la pagina este encuadrada segun los elementos de alrededor y tal, pues he querido hacer una con position:relative.
El codigo solo funciona como yo quiero con IE y a resolucion alta.
Código PHP:
<div style="background-color:red; width:20%">
Contenido del primer div...
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
Y mas chapa que doy aqui
</div>
<br />
<div id="seguidor" style="background-color:blue; width:20%; position:relative;">
<p>Contenido del segundo</p>
<p>Varios parrafos de texto <br />
Con un par de <br /><br />
saltos de linea.</p>
</div>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<script>
var elSeguidor=document.getElementById("seguidor");
var posIni=636; // posicion top inicial (a ojo) de la capa seguidor
function siguelo() {
var scrolleado=document.body.scrollTop;
if(scrolleado>=posIni) {
elSeguidor.style.top=(scrolleado-posIni)+"px";
}
}
window.onscroll=siguelo;
</script>
Quiero decir, que funciona en principio. El problema viene cuando el usuario redimensiona la ventana, o con resoluciones pequeñas (este no es el caso, pero es que he posteado un mini-ejemplo para el foro). Si se deforma la ventana hasta que las capas se ven obligadas a estirarse, el valor de posIni (636 en un principio) ya no es valido, porque la capa habra descendido por efecto de la primera.
Hay alguna manera de saber qué posicion tiene la capa seguidor siendo position:relative?
Hay una manera menos "chapucera" de hacer esto?
salu2 a todos.
