Foros del Web » Programando para Internet » Javascript »

capa que te sigue al hacer scroll a partir de cierta altura

Estas en el tema de capa que te sigue al hacer scroll a partir de cierta altura en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/07/2005, 08:24
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 6 meses
Puntos: 45
capa que te sigue al hacer scroll a partir de cierta altura

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>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
    <
p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</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>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<
p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<
p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</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.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:39.