1 /**

     2 

     3  * author Remy Sharp

     4 

     5  * url http://remysharp.com/2009/01/26/element-in-view-event-plugin/

     6 

     7  */

     8 

     9 (function ($) {

    10 

    11     function getViewportHeight() {

    12 

    13         var height = window.innerHeight; // Safari, Opera

    14 

    15         var mode = document.compatMode;

    16 

    17 

    18 

    19         if ( (mode || !$.support.boxModel) ) { // IE, Gecko

    20 

    21             height = (mode == 'CSS1Compat') ?

    22 

    23             document.documentElement.clientHeight : // Standards

    24 

    25             document.body.clientHeight; // Quirks

    26 

    27         }

    28 

    29 

    30 

    31         return height;

    32 

    33     }

    34 

    35 

    36 

    37     $(window).scroll(function () {

    38 

    39         var vpH = getViewportHeight(),

    40 

    41             scrolltop = (document.documentElement.scrollTop ?

    42 

    43                 document.documentElement.scrollTop :

    44 

    45                 document.body.scrollTop),

    46 

    47             elems = [];

    48 

    49         

    50 

    51         // naughty, but this is how it knows which elements to check for

    52 

    53         $.each($.cache, function () {

    54 

    55             if (this.events && this.events.inview) {

    56 

    57                 elems.push(this.handle.elem);

    58 

    59             }

    60 

    61         });

    62 

    63 

    64 

    65         if (elems.length) {

    66 

    67             $(elems).each(function () {

    68 

    69                 var $el = $(this),

    70 

    71                     top = $el.offset().top,

    72 

    73                     height = $el.height(),

    74 

    75                     inview = $el.data('inview') || false;

    76 

    77 

    78 

    79                 if (scrolltop > (top + height) || scrolltop + vpH < top) {

    80 

    81                     if (inview) {

    82 

    83                         $el.data('inview', false);

    84 

    85                         $el.trigger('inview', [ false ]);                        

    86 

    87                     }

    88 

    89                 } else if (scrolltop < (top + height)) {

    90 

    91                     if (!inview) {

    92 

    93                         $el.data('inview', true);

    94 

    95                         $el.trigger('inview', [ true ]);

    96 

    97                     }

    98 

    99                 }

   100 

   101             });

   102 

   103         }

   104 

   105     });

   106 

   107     

   108 

   109     // kick the event to pick up any elements already in view.

   110 

   111     // note however, this only works if the plugin is included after the elements are bound to 'inview'

   112 

   113     $(function () {

   114 

   115         $(window).scroll();

   116 

   117     });

   118 

   119 })(jQuery);

   120