Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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
                    $(this).fadeIn();
                });
                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
                    $(this).fadeOut();
                });
                
                //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:800px;
            left:300px;
        }
    -->
    </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>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers