Tiggles ツ of Speak Creative
2/19/2020 - 9:51 PM

Element Inview

detect when elements are in viewport, and add class to them, or perform some function. good for creating animations when user gets to that part of the page, or adding lazy load for better page loads.

More info: https://github.com/protonet/jquery.inview

/**
 * author Remy Sharp
 * url http://remysharp.com/2009/01/26/element-in-view-event-plugin/
 */
(function ($) {
   function getViewportHeight() {
       var height = window.innerHeight; // Safari, Opera
       var mode = document.compatMode;

       if ( (mode || !$.support.boxModel) ) { // IE, Gecko
           height = (mode == 'CSS1Compat') ?
           document.documentElement.clientHeight : // Standards
           document.body.clientHeight; // Quirks
       }

       return height;
   }

   $(window).scroll(function () {
       var vpH = getViewportHeight(),
           scrolltop = (document.documentElement.scrollTop ?
               document.documentElement.scrollTop :
               document.body.scrollTop),
           elems = [];
       
       // naughty, but this is how it knows which elements to check for
       $.each($.cache, function () {
           if (this.events && this.events.inview) {
               elems.push(this.handle.elem);
           }
       });

       if (elems.length) {
           $(elems).each(function () {
               var $el = $(this),
                   top = $el.offset().top,
                   height = $el.height(),
                   inview = $el.data('inview') || false;

               if (scrolltop > (top + height) || scrolltop + vpH < top) {
                   if (inview) {
                       $el.data('inview', false);
                       $el.trigger('inview', [ false ]);                        
                   }
               } else if (scrolltop < (top + height)) {
                   if (!inview) {
                       $el.data('inview', true);
                       $el.trigger('inview', [ true ]);
                   }
               }
           });
       }
   });
   
   // kick the event to pick up any elements already in view.
   // note however, this only works if the plugin is included after the elements are bound to 'inview'
   $(function () {
       $(window).scroll();
   });
})(jQuery);
<script src="jquery.inview.js"></script>
<script>
$('.yourElement').each(function () {
  $(this).bind('inview', function (event, visible) {
    if (visible === true) {
      // console.log("this one in view");
      $(this).addClass('inview');
    } else {
      // console.log("ohnoes, timetohide!");
      $(this).removeClass('inview');
    }
  });
});
</script>