Saber cuando una parte de la web esta en pantalla

Eux · #1 (**permalink**) 02/01/2014, 11:56

Hola a tod@s,

Llevo toda la tarde buscando y no he tenido suerte, quisiera poder saber el momento en que una parte de la página esté visible en pantalla, me explico, imagenemos que tengo un página bastante larga, y un poco más abajo haciendo srolling hay un lugar concreto (img, div...o lo que sea) que cuando aparezca por pantalla me gustaría que saltase un alert("Hola"). La solución debe ser dinámica, dado que la zona que hará saltar el alert cuando sea visible en pantalla puede estar un día en un sitio y otro día mucho más abajo.

¿alguna idea?

Gracias por anticipado.

Saludos.

IsaBelM · #2 (**permalink**) 03/01/2014, 17:25

puedes saber la posición de un elemento usando offsetParent y offsetTop y para saber la posición del scroll

Cita:

self.pageYOffset || (document.documentElement.scrollTop + document.body.scrollTop);

danny_ · #3 (**permalink**) 03/01/2014, 18:58

Esta clase quizás te pueda ser de utilidad, únicamente tienes que instanciar la clase, y en los parámetros pasar el elemento en el cual efectuará la acción al realizar el scroll y el segundo parámetro un string con la acción o función que quieras ejecutar cuando hayas llegado el elemento target. Espero te sea de utilidad.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
 
window.onscroll=function(){
    var elem=document.getElementById('target');
    var getPositions=new ActionWhenPositionElement(elem,"alert('boom!!')");
    
}
 
 
 
 
 
function getScrollOffsets(w) {
    // Use the specified window or the current window if no argument
    w = w || window;
 
    // This works for all browsers except IE versions 8 and before
    if (w.pageXOffset != null) return {x: w.pageXOffset, y:w.pageYOffset};
    
    // For IE (or any browser) in Standards mode
    var d = w.document;
    if (document.compatMode == "CSS1Compat")
        return {x:d.documentElement.scrollLeft, y:d.documentElement.scrollTop};
 
    // For browsers in Quirks mode
    return { x: d.body.scrollLeft, y: d.body.scrollTop };
}
 
 
function positionObject(obj){
    var y=obj.offsetTop;
    return y;
}
//activa una función al hacer scroll y llegar a la misma altura de el elemento idtarget.
var count=1;
function ActionWhenPositionElement(idTarget,functionString){
    this.positionObjY=positionObject(idTarget);
    this.positionScrollY=getScrollOffsets().y;
    
    if(this.positionObjY < this.positionScrollY+idTarget.getBoundingClientRect().height && count==1){
        count--;
        eval(functionString)
    }
}
 
</script>
</head>
 
<body>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
 
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
 
<p id="target" style="height:450px;">target</p>
<br />
 
 
</body>
</html>

Eux · #4 (**permalink**) 07/01/2014, 05:47

Para empezar gracias a los dos por responder.

Para danny_, he copiado tu código que por lo que veo está preparado ya para funcionar con la <p> y su id="target" y que me salte el alert pero no me funciona...¿falta añadir algo más para que al menos dé un alert? ¿lo has probado?

Gracias.

danny_ · #5 (**permalink**) 07/01/2014, 12:35

umm... es raro, debería funcionarte en cualquier navegador, te da algún error en firebug?? Si te sale algún error dime cual a ver como puedo solucionarlo.

Has copiado el código tal cual está? incluido etiquetas html??

El alert solo debería saltarte una sola vez, una vez salta aunque vuelvas a hacer scroll no tiene porque activarse, esta función la realicé para poder activar una animación cuando el usuario llegara al div donde estaba aplicada dicha animación, pero puedes usarla con cualquier otra función o alert.

Un saludo!

Eux · #6 (**permalink**) 09/01/2014, 04:38

Hola danny_,

Si si, he copiado todo el código tal como me lo has puesto y no me ha ido, con el firebug ejecutado entonces si me va, la verdad es que no entiendo porque. Bueno al final he encontrado una librería que se llama jquery-visible-master por si le sirve a alguien que me lo ha solucionado. Aunque a medias, dado que este código estará dentro de un iframe(de 50x50), y este iframe estará en una página de un tercero sin saber en qué posición estará, se supone que cuando el usuario tenga visible dicho iframe es cuando salta un evento (alert en este caso). Lo que está pasando es que nada más cargarse la página de este tercero salta el evento del iframe aún sin estar visible. No sé si me he explicado ya que lo que quiero hacer es un poco lioso uffff...quizas si me funciona tu código no le pasará lo de esta librería, o es que de todas formas estoy haciendo algo mal por concepto.

Saludos.

Gracias.

danny_ · #7 (**permalink**) 10/01/2014, 04:42

Me parece muy raro que sólo te funcione cuando tienes activo firbug.... Te has asegurado de que tu navegador tenga activo la ejecución de scripts?? Qué navegador usas?? intenta correr el script en otro navegador y verás que te funcionará.

Saludos!!

Eux · #8 (**permalink**) 14/01/2014, 09:02

Danny_, sigue sin funcionarme, de todas maneras no te preocupes dado que yo quería eso para poder luego poner un iframe al fondo de una página de terceros y cuando la gente tenga el iframe en pantalla que me mande al servidor un aviso, y tu código aunque me funcionara, al estar dentro de la página a la cual llama el iframe, el usuario debería hacer scrollingo en esta página a la que llama el iframe para que salte la solicitud al servidor, sino aunque esté en pantalla no reacciona ya que no salta el evento :( :(

SinguerInc · #9 (**permalink**) 15/01/2014, 10:05

Hola, puedes hacerlo con ésta librería:

http://imakewebthings.com/jquery-waypoints

Simplemente tienes que decirle qué función ejecutar cuando el objeto se visualiza en pantalla.

Saludos, pásate por mi blog!