- Added offset param.

- Updated gulpfile.js and packeage.json.
- Review the original code.

Author: Marcelo Tosco @capynet

README.md

@@ -8,12 +8,12 @@ You need throw confetti when the user scroll and see an element?, so this plugin
 npm install jquery-is-in-viewport --save
 // or
 yarn add jquery-is-in-viewport
-// or 
-bower install jquery-is-in-viewport
 ```
 
 ## Usage
 ```javascript
+const offset = 100;
+
 $('.block').isInViewport(function (status) {
   if (status === 'entered') {
     $(this).addClass('throw-confetti')
@@ -22,8 +22,9 @@ $('.block').isInViewport(function (status) {
   if (status === 'leaved') {
     $(this).removeClass('throw-confetti')
   }
-})
+}, offset)
 ```
 
 ## Options
 Status can be '**entered**' or '**leaved**'.
+

dist/isInViewport.jquery.js

@@ -1,71 +1,72 @@
 /* ====================================================
- * jQuery Is In Viewport.
+ * jQuery is in viewport.
+ *
  * https://github.com/frontid/jQueryIsInViewport
  * Marcelo Iván Tosco (capynet)
  * Inspired on https://stackoverflow.com/a/40658647/1413049
  * ==================================================== */
 !function ($) {
-  'use strict'
+  'use strict';
 
-  var Class = function (el, cb) {
+  const IsInViewport = function (el, cb, offset) {
     this.$el = $(el);
     this.cb = cb;
+    this.offset = offset;
     this.watch();
     return this;
   };
 
-  Class.prototype = {
+  IsInViewport.prototype = {
 
     /**
      * Checks if the element is in.
      *
      * @returns {boolean}
      */
     isIn: function isIn() {
-      var _self = this;
-      var $win = $(window);
-      var elementTop = _self.$el.offset().top;
-      var elementBottom = elementTop + _self.$el.outerHeight();
-      var viewportTop = $win.scrollTop();
-      var viewportBottom = viewportTop + $win.height();
+      const _self = this;
+      const $win = $(window);
+      const elementTop = _self.$el.offset().top - _self.offset;
+      const elementBottom = elementTop + _self.$el.outerHeight();
+      const viewportTop = $win.scrollTop();
+      const viewportBottom = viewportTop + $win.height();
       return elementBottom > viewportTop && elementTop < viewportBottom;
     },
 
     /**
      * Launch a callback indicating when the element is in and when is out.
      */
     watch: function () {
-      var _self = this;
-      var _isIn = false;
+      const self = this;
+      let isIn = false;
 
       $(window).on('resize scroll', function () {
 
-        if (_self.isIn() && _isIn === false) {
-          _self.cb.call(_self.$el, 'entered');
-          _isIn = true;
+        if (self.isIn() && isIn === false) {
+          self.cb.call(self.$el, 'entered');
+          isIn = true;
         }
 
-        if (_isIn === true && !_self.isIn()) {
-          _self.cb.call(_self.$el, 'leaved');
-          _isIn = false;
+        if (isIn === true && !self.isIn()) {
+          self.cb.call(self.$el, 'leaved');
+          isIn = false;
         }
-
       })
     }
-
-
   };
 
   // jQuery plugin.
   //-----------------------------------------------------------
-  $.fn.isInViewport = function (cb) {
+  $.fn.isInViewport = function (cb, offset) {
+    offset || (offset = 0);
     return this.each(function () {
-      var $element = $(this);
-      var data = $element.data('isInViewport');
+      const $element = $(this);
+      const data = $element.data('isInViewport');
+
       if (!data) {
-        $element.data('isInViewport', (new Class(this, cb)));
+        $element.data('isInViewport', (new IsInViewport(this, cb, offset)));
       }
     })
   }
 
-}(window.jQuery);
+}(window.jQuery);

dist/isInViewport.jquery.min.js

@@ -1,13 +1,21 @@
-var gulp = require('gulp');
-var minify = require('gulp-minify')
+'use strict';
+const gulp = require('gulp');
+const minify = require('gulp-minify');
 
-gulp.task('build', function () {
-  gulp.src('isInViewport.jquery.js').pipe(minify({
-    ext: {
-      src: '.js',
-      min: '.min.js',
-    },
-    exclude: ['tasks'],
-    ignoreFiles: ['-min.js'],
-  })).pipe(gulp.dest('dist'))
-})
+/**
+ * Compiles SASS files.
+ */
+const jsTask = () => {
+  return gulp.src('isInViewport.jquery.js')
+    .pipe(minify({
+      ext: {
+        src: '.js',
+        min: '.min.js',
+      },
+      exclude: ['tasks'],
+      ignoreFiles: ['-min.js'],
+    }))
+    .pipe(gulp.dest('dist'))
+};
+
+exports.build = jsTask;

gulpfile.js

@@ -1,71 +1,72 @@
 /* ====================================================
- * jQuery Is In Viewport.
+ * jQuery is in viewport.
+ *
  * https://github.com/frontid/jQueryIsInViewport
  * Marcelo Iván Tosco (capynet)
  * Inspired on https://stackoverflow.com/a/40658647/1413049
  * ==================================================== */
 !function ($) {
-  'use strict'
+  'use strict';
 
-  var Class = function (el, cb) {
+  const IsInViewport = function (el, cb, offset) {
     this.$el = $(el);
     this.cb = cb;
+    this.offset = offset;
     this.watch();
     return this;
   };
 
-  Class.prototype = {
+  IsInViewport.prototype = {
 
     /**
      * Checks if the element is in.
      *
      * @returns {boolean}
      */
     isIn: function isIn() {
-      var _self = this;
-      var $win = $(window);
-      var elementTop = _self.$el.offset().top;
-      var elementBottom = elementTop + _self.$el.outerHeight();
-      var viewportTop = $win.scrollTop();
-      var viewportBottom = viewportTop + $win.height();
+      const _self = this;
+      const $win = $(window);
+      const elementTop = _self.$el.offset().top - _self.offset;
+      const elementBottom = elementTop + _self.$el.outerHeight();
+      const viewportTop = $win.scrollTop();
+      const viewportBottom = viewportTop + $win.height();
       return elementBottom > viewportTop && elementTop < viewportBottom;
     },
 
     /**
      * Launch a callback indicating when the element is in and when is out.
      */
     watch: function () {
-      var _self = this;
-      var _isIn = false;
+      const self = this;
+      let isIn = false;
 
       $(window).on('resize scroll', function () {
 
-        if (_self.isIn() && _isIn === false) {
-          _self.cb.call(_self.$el, 'entered');
-          _isIn = true;
+        if (self.isIn() && isIn === false) {
+          self.cb.call(self.$el, 'entered');
+          isIn = true;
         }
 
-        if (_isIn === true && !_self.isIn()) {
-          _self.cb.call(_self.$el, 'leaved');
-          _isIn = false;
+        if (isIn === true && !self.isIn()) {
+          self.cb.call(self.$el, 'leaved');
+          isIn = false;
         }
-
       })
     }
-
-
   };
 
   // jQuery plugin.
   //-----------------------------------------------------------
-  $.fn.isInViewport = function (cb) {
+  $.fn.isInViewport = function (cb, offset) {
+    offset || (offset = 0);
     return this.each(function () {
-      var $element = $(this);
-      var data = $element.data('isInViewport');
+      const $element = $(this);
+      const data = $element.data('isInViewport');
+
       if (!data) {
-        $element.data('isInViewport', (new Class(this, cb)));
+        $element.data('isInViewport', (new IsInViewport(this, cb, offset)));
       }
     })
   }
 
-}(window.jQuery);
+}(window.jQuery);

isInViewport.jquery.js

@@ -1,13 +1,16 @@
 {
   "name": "jquery-is-in-viewport",
-  "version": "1.0.3",
-  "description": "React when an element is in the viewport.",
+  "version": "1.0.4",
+  "scripts": {
+    "build": "gulp build"
+  },
+  "description": "Reacts when an element is in the viewport.",
   "main": "isInViewport.jquery.js",
   "repository": "https://github.com/frontid/jQueryIsInViewport.git",
   "author": "capynet <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "gulp": "*",
-    "gulp-minify": "^1.0.0"
+    "gulp": "^4.0.2",
+    "gulp-minify": "^3.1.0"
   }
 }