Blog >> Como detectar con jQuery si un elemento por su posición es visible en el navegador

En ocasiones podemos necesitar detectar si un elemento HTML es visible en la ventana de nuestro navegador para lanzar un aviso, una alerta, etc. Es un problema muy sencillo de límites que abordaremos en este artículo.

Para ello podemos utilizar un desarrollo que calculará las dimensiones de nuestro navegador y su posición; y la posición y dimensiones del elemento en cuestión. En principio sólo tendremos en cuenta el eje vertical por lo que escucharemos los eventos de scroll y resize de la ventana para lanzar la función.

La naturaleza del problema

Este es uno de los problemas que nos encontramos con más frecuencia en programación, ya sea en frontend, consulta de BD, etc. Los problemas de límites. Para detectar si un elemento es visible en nuestra ventana del navegador deberemos de tener en cuenta los siguientes valores:

1. Posición en la que se encuentra la parte que estamos viendo del documento HTML respecto al inicio del mismo. Para ello podemos utilizar el método de jQuery scrollTop().

   var windowTop = $(document).scrollTop();

   var windowTop = $(document).scrollTop();

2. El punto más bajo que estamos viendo ahora mismo en la ventana del navegador del documento HTML. O lo que es lo mismo, la altura interna de nuestro navegador.

   var windowBottom = windowTop + window.innerHeight;

   var windowBottom = windowTop + window.innerHeight;

3. La posición en la que se encuentra la parte superior del elemento que queremos observar respecto al inicio del documento. Podemos elegir cualquier elemento HTML con jQuery. Utilizaremos el valor del atributo top obtenido con el método offset() de jQuery.

   var elementPositionTop = element.offset().top;

   var elementPositionTop = element.offset().top;

4. Y la última parte de nuestro problema geométrico es conocer la altura del elemento a observar que obtendremos con el método height().

   var elementPositionBottom = elementPositionTop + element.height();

   var elementPositionBottom = elementPositionTop + element.height();

Límites a tener en cuenta

Vamos a simplificar al máximo nuestra función. Por defecto vamos a asumir que el elemento es visible por defecto, así que tendremos que determinar las condiciones en las que NO será visible en la ventana de nuestro navegador.

1. Cuando el límite superior del elemento sea mayor que la posición inferior de la ventana significará que todo el documento estará por debajo de la parte visible:

   elementPositionTop > windowBottom

   elementPositionTop > windowBottom

2. Cuando el límite inferior del elemento sea menor que la posición superior de la ventana significará que todo el documento estará por encima de la parte visible:

   elementPositionBottom < windowTop

   elementPositionBottom < windowTop

En cualquier otra situación nuestro elemento será visible.

var visible = true;

Revisemos el código

Como podemos ver he creado una función initShazam (es un nombre tan malo o bueno como otro cualquiera) que lo único que hace es cada vez que hagamos scroll o modifiquemos la ventana del navegador realiza una inscripción true o false en la consola JavaScript según sea visible o no nuestro elemento.

A partir de aquí tenemos una función que nos puede permitir realizar cualquier acción cuando se muestre en ventana un elemento HTML: iniciar una animación, mostrar otros elementos HTML, lanzar una petición AJAX, etc. Espero os sea de utilidad en vuestros propios desarrollos.

 
  Shazam
 
<style>
  div{
    height: 1200px;
    background-color: maroon;
    border: 5px solid red;
    width: 75%;
    margin: 0 auto;
    margin-top: 800px;
  }
  body {
    height: 2000px;
  }
  </style>

Autor: Oscar Gascón Arjol
Última actualización: 22 de marzo de 2015