×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: Javascript
Posted by: Vincenzo Assenza
Added: Sep 22, 2015 11:15 AM
Views: 15
  1.     var vph = 0;
  2.     w.getViewportDimensions = function () {
  3.         vph = Math.max(d.documentElement.clientHeight, w.innerHeight || 0);
  4.     }
  5.     w.getViewportDimensions();
  6.     //on resize/scroll
  7.     $(w).on('resize orientationChanged', function () {
  8.         w.getViewportDimensions();
  9.     });
  10.  
  11.     $.fn.inViewport = function (whenInView, whenNotInView) {
  12.         return this.each(function () {
  13.             var el = $(this),
  14.                     inviewalreadycalled = false,
  15.                     notinviewalreadycalled = false;
  16.             //on resize/scroll
  17.             $(w).on('resize orientationChanged scroll', function () {
  18.                 checkInView();
  19.             });
  20.             function checkInView() {
  21.                 var rect = el[0].getBoundingClientRect(),
  22.                         t = rect.top,
  23.                         b = rect.bottom;
  24.                 if (t < vph && b > 0) {
  25.                     if (!inviewalreadycalled) {
  26.                         whenInView.call(el);
  27.                         inviewalreadycalled = true;
  28.                         notinviewalreadycalled = false;
  29.                     }
  30.                 } else {
  31.                     if (!notinviewalreadycalled) {
  32.                         whenNotInView.call(el);
  33.                         notinviewalreadycalled = true;
  34.                         inviewalreadycalled = false;
  35.                     }
  36.                 }
  37.             }
  38.             //initial check
  39.             checkInView();
  40.         });
  41.     }
  42.    
  43.     $('.selector').inViewport(
  44.         function () {
  45.             $(this).addClass("class");
  46.         },
  47.         function () {
  48.             $(this).removeClass("class");
  49.         }
  50.     );