Foros del Web - Ver Mensaje Individual

Naahuel · #2 (**permalink**) 04/03/2012, 20:26

¿Te referís a cómo saber si un elemento determinado está dentro del area visible del navegador?

Yo tengo un script hecho por mi, para jQuery, que se encarga de esa tarea. Lo modifiqué para que lo entiendas. La idea es que un evento se dispare cuando el elemento está visible y cuando se pierde:

Código HTML:

Ver original<!doctype html>
<html>
<head>
    <title>Prueba</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var elems = $('.estoy-visible');    //elementos que quiero saber si estan en el área visible
            var winW = $(window).width();       //dimensiones de la ventana
            var winH = $(window).height();      //dimensiones de la ventana
            elems.each(function(){
                var self = $(this);
                self.on('esta/visible',function(){
                    //evento personalizado que crearemos mas abajo, se dispara cuando el elemento está visible
                    //lo que ponemos aca es lo que queremos hacer si el elemento aparece en pantalla
                    $('#info').html('<p>Est&aacute; visible: '+$(this).text()+'</p>');
                });
                self.on('esta/invisible',function(){
                    //evento personalizado que crearemos mas abajo, se dispara cuando el elemento está FUERA del area visible
                    //lo que ponemos aca es lo que queremos hacer si el elemento DESAPARECE de la pantalla
                    $('#info').html('<p>Se perdi&oacute;: '+$(this).text()+'</p>');
                });
                
                //obtenemos las dimensiones de cada elemento y su posicion
                var self_w = self.outerWidth(); //ancho exterior
                var self_h = self.outerHeight(); //alto exterior
                var self_l = self.offset().left; //coordenada izquierda
                var self_t = self.offset().top; //coordenada arriba
                
                //asignamos un evento a window.scroll(), para cuando se haga scroll
                //esta parte del script es algo inefectiva. No es bueno si son muchos los elementos a verificar.
                $(window).scroll(function(){
                    var scroll_h = this.pageXOffset;
                    var scroll_v = this.pageYOffset;
                    //acá verificamos si el elemento está COMPLETAMENTE dentro de las dimensiones de la ventana
                    if( (self_w + self_l - scroll_h) <= winW && (self_l) >= scroll_h &&
                        (self_h + self_t - scroll_v) <= winH && (self_t) >= scroll_v ){
                        self.trigger('esta/visible');
                    }
                    else{
                        self.trigger('esta/invisible');
                    }
                });
            });
        });
    </script>
    <style type="text/css">
    <!--
        #wrap{
            height:4000px;
            width:6000px;
            position:relative;
        }
        
        #info{
            position:fixed;
            top:0;
            left:0;
        }
        
        .estoy-visible{
            background:blue;
            width:200px;
            height:200px;
            position:absolute;
            top:1000px;
            left:2000px;
        }
    -->
    </style>
    
</head>
<body>
    <div id="wrap">
        <p id="info"></p>               <!-- párrafo SOLAMENTE para mostrar la info del elem 1-->
        <div class="estoy-visible">Elemento 1</div> <!-- elemento que quiero saber si esta visible o no -->
    </div>
</body>
</html>

Acá lo tenés funcionando JSBin: http://jsbin.com/ewatas

El script funciona muy bien y tiene una serie de aplicaciones. Tal vez se lo podría implementar en forma de plugin y optimizar para que no use tantos callbacks y eventos.

Espero entiendas cómo se lo aplica. Saludos.