stickybits - npm Package Compare versions

Comparing version 1.1.3 to 1.2.3

dist/jquery.stickybits.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
-  typeof define === 'function' && define.amd ? define(factory) :
-  (factory());
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	(factory());
 }(this, (function () { 'use strict';
 
+var positionStickyVal = 'fixed';
+var browserPrefix = ['', '-o-', '-webkit-', '-moz-', '-ms-'];
+var stickyBitClass = 'js-is-sticky';
+var stickyBitIsStuckClass = 'js-is-stuck';
+
 function Stickybit(target, o) {
-  var opts = {
-    scrollTarget: window,
-    stickyBitStickyOffset: 0,
-    verticalPosition: 'top',
-    useStickyClasses: false
-  };
   this.el = target;
-  this.scrollTarget = o && o.scrollTarget || opts.scrollTarget;
-  this.stickyBitStickyOffset = o && o.stickyBitStickyOffset || opts.stickyBitStickyOffset;
-  this.verticalPosition = o && o.verticalPosition || opts.verticalPosition;
-  this.useStickyClasses = o && o.useStickyClasses || opts.useStickyClasses;
-  var el = this.el;
-  var elStyle = el.style;
-  var browserPrefix = ['', '-o-', '-webkit-', '-moz-', '-ms-'];
+  this.scrollTarget = o && o.scrollTarget || window;
+  this.stickyBitStickyOffset = o && o.stickyBitStickyOffset || 0;
+  this.verticalPosition = o && o.verticalPosition || 'top';
+  this.useStickyClasses = o && o.useStickyClasses || false;
+  this.elStyle = this.el.style;
+}
+
+Stickybit.prototype.setStickyPosition = function setStickyPosition() {
+  var elStyle = this.elStyle;
   var verticalPosition = this.verticalPosition;
@@ -26,3 +27,2 @@ for (var i = 0; i < browserPrefix.length; i += 1) {
   }
-  var positionStickyVal = 'fixed';
   if (elStyle.position !== '') {
@@ -33,10 +33,13 @@ positionStickyVal = elStyle.position;
     }
-    if (this.useStickyClasses === false) return;
   }
+};
+
+Stickybit.prototype.manageStickiness = function manageStickiness() {
+  var el = this.el;
+  var scrollTarget = this.scrollTarget;
+  var verticalPosition = this.verticalPosition;
   var stickyBitStickyOffset = this.stickyBitStickyOffset;
+  var elStyle = this.elStyle;
   var elClasses = el.classList;
   var elParent = el.parentNode;
-  var scrollTarget = this.scrollTarget;
-  var stickyBitClass = 'js-is-sticky';
-  var stickyBitIsStuckClass = 'js-is-stuck';
   var stickyBitStart = el.getBoundingClientRect().top;
@@ -52,3 +55,2 @@ var stickyBitStop = stickyBitStart + elParent.offsetHeight - el.offsetHeight;
       }
-      return;
     } else if (scroll > stickyBitStart && scroll < stickyBitStop) {
@@ -62,3 +64,2 @@ if (!elClasses.contains(stickyBitClass)) elClasses.add(stickyBitClass);
       elStyle[verticalPosition] = stickyBitStickyOffset + 'px';
-      return;
     } else if (scroll > stickyBitStop && !elClasses.contains(stickyBitIsStuckClass)) {
@@ -71,10 +72,18 @@ elClasses.remove(stickyBitClass);
       elStyle.position = 'absolute';
-      return;
     }
-    return;
   }
+  var invoked = void 0;
+  function checkStickiness() {
+    if (invoked) return;
+    invoked = true;
+    stickiness();
+    window.setTimeout(function () {
+      invoked = false;
+    }, 0);
+  }
   scrollTarget.addEventListener('scroll', function () {
-    return scrollTarget.requestAnimationFrame(stickiness);
+    return scrollTarget.requestAnimationFrame(checkStickiness);
   });
-}
+};
+
 function stickybits(target, o) {
@@ -87,4 +96,7 @@ var els = typeof target === 'string' ? document.querySelectorAll(target) : target;
     stickyBit = new Stickybit(el, o);
+    stickyBit.setStickyPosition();
+    if (stickyBit.positionStickyVal === 'fixed' || stickyBit.useStickyClasses === true) {
+      stickyBit.manageStickiness();
+    }
   }
-  return stickyBit;
 }
@@ -97,3 +109,2 @@
       stickybits(this, opts);
-      return;
     };
@@ -100,0 +111,0 @@ }

dist/jquery.stickybits.min.js

 /**
  * stickybits - Stickybits is a lightweight (<2KB) alternative to `position: sticky` polyfills
- * @version v1.1.2
+ * @version v1.2.3
  * @link https://github.com/dollarshaveclub/stickybits#readme
  * @author Jeff Wainwright <[e-mail]>
  * @license MIT */
-!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i():"function"==typeof define&&define.amd?define(i):i()}(this,function(){"use strict";function t(t,i){function s(){var t=y.scrollY;if(t<p)return void(d.contains(k)&&(d.remove(k),n.position=""));if(t>p&&t<h)return d.contains(k)||d.add(k),d.contains(v)&&(d.remove(v),n.bottom=""),n.position=a,void(n[c]=l+"px");if(t>h&&!d.contains(v)){if(d.remove(k),d.add(v),"fixed"!==a)return;return n.top="",n.bottom="0",void(n.position="absolute")}}var e={scrollTarget:window,stickyBitStickyOffset:0,verticalPosition:"top",useStickyClasses:!1};this.el=t,this.scrollTarget=i&&i.scrollTarget||e.scrollTarget,this.stickyBitStickyOffset=i&&i.stickyBitStickyOffset||e.stickyBitStickyOffset,this.verticalPosition=i&&i.verticalPosition||e.verticalPosition,this.useStickyClasses=i&&i.useStickyClasses||e.useStickyClasses;for(var o=this.el,n=o.style,r=["","-o-","-webkit-","-moz-","-ms-"],c=this.verticalPosition,f=0;f<r.length;f+=1)n.position=r[f]+"sticky";var a="fixed";if(""===n.position||(a=n.position,"top"===c&&(n[c]=this.stickyBitStickyOffset+"px"),this.useStickyClasses!==!1)){var l=this.stickyBitStickyOffset,d=o.classList,u=o.parentNode,y=this.scrollTarget,k="js-is-sticky",v="js-is-stuck",p=o.getBoundingClientRect().top,h=p+u.offsetHeight-o.offsetHeight;u.classList.add("js-stickybit-parent"),y.addEventListener("scroll",function(){return y.requestAnimationFrame(s)})}}function i(i,s){var e="string"==typeof i?document.querySelectorAll(i):i;"length"in e||(e=[e]);for(var o=void 0,n=0;n<e.length;n+=1){var r=e[n];o=new t(r,s)}return o}if("undefined"!=typeof window){var s=window.$||window.jQuery||window.Zepto;s&&(s.fn.stickybits=function(t){i(this,t)})}});
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i():"function"==typeof define&&define.amd?define(i):i()}(0,function(){"use strict";function t(t,i){this.el=t,this.scrollTarget=i&&i.scrollTarget||window,this.stickyBitStickyOffset=i&&i.stickyBitStickyOffset||0,this.verticalPosition=i&&i.verticalPosition||"top",this.useStickyClasses=i&&i.useStickyClasses||!1,this.elStyle=this.el.style}function i(i,e){var s="string"==typeof i?document.querySelectorAll(i):i;"length"in s||(s=[s]);for(var o=void 0,n=0;n<s.length;n+=1){o=new t(s[n],e),o.setStickyPosition(),"fixed"!==o.positionStickyVal&&o.useStickyClasses!==!0||o.manageStickiness()}}var e="fixed",s=["","-o-","-webkit-","-moz-","-ms-"],o="js-is-sticky",n="js-is-stuck";if(t.prototype.setStickyPosition=function(){for(var t=this.elStyle,i=this.verticalPosition,o=0;o<s.length;o+=1)t.position=s[o]+"sticky";""!==t.position&&(e=t.position,"top"===i&&(t[i]=this.stickyBitStickyOffset+"px"))},t.prototype.manageStickiness=function(){function t(){var t=c.scrollY;if(t<y)a.contains(o)&&(a.remove(o),l.position="");else if(t>y&&t<u)a.contains(o)||a.add(o),a.contains(n)&&(a.remove(n),l.bottom=""),l.position=e,l[f]=r+"px";else if(t>u&&!a.contains(n)){if(a.remove(o),a.add(n),"fixed"!==e)return;l.top="",l.bottom="0",l.position="absolute"}}function i(){p||(p=!0,t(),window.setTimeout(function(){p=!1},0))}var s=this.el,c=this.scrollTarget,f=this.verticalPosition,r=this.stickyBitStickyOffset,l=this.elStyle,a=s.classList,d=s.parentNode,y=s.getBoundingClientRect().top,u=y+d.offsetHeight-s.offsetHeight;d.classList.add("js-stickybit-parent");var p=void 0;c.addEventListener("scroll",function(){return c.requestAnimationFrame(i)})},"undefined"!=typeof window){var c=window.$||window.jQuery||window.Zepto;c&&(c.fn.stickybits=function(t){i(this,t)})}});

dist/stickybits.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-  typeof define === 'function' && define.amd ? define(factory) :
-  (global.stickybits = factory());
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	(global.stickybits = factory());
 }(this, (function () { 'use strict';
 
+var positionStickyVal = 'fixed';
+var browserPrefix = ['', '-o-', '-webkit-', '-moz-', '-ms-'];
+var stickyBitClass = 'js-is-sticky';
+var stickyBitIsStuckClass = 'js-is-stuck';
+
 function Stickybit(target, o) {
-  var opts = {
-    scrollTarget: window,
-    stickyBitStickyOffset: 0,
-    verticalPosition: 'top',
-    useStickyClasses: false
-  };
   this.el = target;
-  this.scrollTarget = o && o.scrollTarget || opts.scrollTarget;
-  this.stickyBitStickyOffset = o && o.stickyBitStickyOffset || opts.stickyBitStickyOffset;
-  this.verticalPosition = o && o.verticalPosition || opts.verticalPosition;
-  this.useStickyClasses = o && o.useStickyClasses || opts.useStickyClasses;
-  var el = this.el;
-  var elStyle = el.style;
-  var browserPrefix = ['', '-o-', '-webkit-', '-moz-', '-ms-'];
+  this.scrollTarget = o && o.scrollTarget || window;
+  this.stickyBitStickyOffset = o && o.stickyBitStickyOffset || 0;
+  this.verticalPosition = o && o.verticalPosition || 'top';
+  this.useStickyClasses = o && o.useStickyClasses || false;
+  this.elStyle = this.el.style;
+}
+
+Stickybit.prototype.setStickyPosition = function setStickyPosition() {
+  var elStyle = this.elStyle;
   var verticalPosition = this.verticalPosition;
@@ -26,3 +27,2 @@ for (var i = 0; i < browserPrefix.length; i += 1) {
   }
-  var positionStickyVal = 'fixed';
   if (elStyle.position !== '') {
@@ -33,10 +33,13 @@ positionStickyVal = elStyle.position;
     }
-    if (this.useStickyClasses === false) return;
   }
+};
+
+Stickybit.prototype.manageStickiness = function manageStickiness() {
+  var el = this.el;
+  var scrollTarget = this.scrollTarget;
+  var verticalPosition = this.verticalPosition;
   var stickyBitStickyOffset = this.stickyBitStickyOffset;
+  var elStyle = this.elStyle;
   var elClasses = el.classList;
   var elParent = el.parentNode;
-  var scrollTarget = this.scrollTarget;
-  var stickyBitClass = 'js-is-sticky';
-  var stickyBitIsStuckClass = 'js-is-stuck';
   var stickyBitStart = el.getBoundingClientRect().top;
@@ -52,3 +55,2 @@ var stickyBitStop = stickyBitStart + elParent.offsetHeight - el.offsetHeight;
       }
-      return;
     } else if (scroll > stickyBitStart && scroll < stickyBitStop) {
@@ -62,3 +64,2 @@ if (!elClasses.contains(stickyBitClass)) elClasses.add(stickyBitClass);
       elStyle[verticalPosition] = stickyBitStickyOffset + 'px';
-      return;
     } else if (scroll > stickyBitStop && !elClasses.contains(stickyBitIsStuckClass)) {
@@ -71,10 +72,18 @@ elClasses.remove(stickyBitClass);
       elStyle.position = 'absolute';
-      return;
     }
-    return;
   }
+  var invoked = void 0;
+  function checkStickiness() {
+    if (invoked) return;
+    invoked = true;
+    stickiness();
+    window.setTimeout(function () {
+      invoked = false;
+    }, 0);
+  }
   scrollTarget.addEventListener('scroll', function () {
-    return scrollTarget.requestAnimationFrame(stickiness);
+    return scrollTarget.requestAnimationFrame(checkStickiness);
   });
-}
+};
+
 function stickybits(target, o) {
@@ -87,4 +96,7 @@ var els = typeof target === 'string' ? document.querySelectorAll(target) : target;
     stickyBit = new Stickybit(el, o);
+    stickyBit.setStickyPosition();
+    if (stickyBit.positionStickyVal === 'fixed' || stickyBit.useStickyClasses === true) {
+      stickyBit.manageStickiness();
+    }
   }
-  return stickyBit;
 }
@@ -91,0 +103,0 @@

dist/stickybits.min.js

 /**
  * stickybits - Stickybits is a lightweight (<2KB) alternative to `position: sticky` polyfills
- * @version v1.1.2
+ * @version v1.2.3
  * @link https://github.com/dollarshaveclub/stickybits#readme
  * @author Jeff Wainwright <[e-mail]>
  * @license MIT */
-!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):t.stickybits=i()}(this,function(){"use strict";function t(t,i){function s(){var t=d.scrollY;if(t<p)return void(u.contains(k)&&(u.remove(k),n.position=""));if(t>p&&t<h)return u.contains(k)||u.add(k),u.contains(v)&&(u.remove(v),n.bottom=""),n.position=a,void(n[c]=l+"px");if(t>h&&!u.contains(v)){if(u.remove(k),u.add(v),"fixed"!==a)return;return n.top="",n.bottom="0",void(n.position="absolute")}}var e={scrollTarget:window,stickyBitStickyOffset:0,verticalPosition:"top",useStickyClasses:!1};this.el=t,this.scrollTarget=i&&i.scrollTarget||e.scrollTarget,this.stickyBitStickyOffset=i&&i.stickyBitStickyOffset||e.stickyBitStickyOffset,this.verticalPosition=i&&i.verticalPosition||e.verticalPosition,this.useStickyClasses=i&&i.useStickyClasses||e.useStickyClasses;for(var o=this.el,n=o.style,r=["","-o-","-webkit-","-moz-","-ms-"],c=this.verticalPosition,f=0;f<r.length;f+=1)n.position=r[f]+"sticky";var a="fixed";if(""===n.position||(a=n.position,"top"===c&&(n[c]=this.stickyBitStickyOffset+"px"),this.useStickyClasses!==!1)){var l=this.stickyBitStickyOffset,u=o.classList,y=o.parentNode,d=this.scrollTarget,k="js-is-sticky",v="js-is-stuck",p=o.getBoundingClientRect().top,h=p+y.offsetHeight-o.offsetHeight;y.classList.add("js-stickybit-parent"),d.addEventListener("scroll",function(){return d.requestAnimationFrame(s)})}}function i(i,s){var e="string"==typeof i?document.querySelectorAll(i):i;"length"in e||(e=[e]);for(var o=void 0,n=0;n<e.length;n+=1){var r=e[n];o=new t(r,s)}return o}return i});
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):t.stickybits=i()}(this,function(){"use strict";function t(t,i){this.el=t,this.scrollTarget=i&&i.scrollTarget||window,this.stickyBitStickyOffset=i&&i.stickyBitStickyOffset||0,this.verticalPosition=i&&i.verticalPosition||"top",this.useStickyClasses=i&&i.useStickyClasses||!1,this.elStyle=this.el.style}function i(i,e){var s="string"==typeof i?document.querySelectorAll(i):i;"length"in s||(s=[s]);for(var o=void 0,n=0;n<s.length;n+=1){o=new t(s[n],e),o.setStickyPosition(),"fixed"!==o.positionStickyVal&&o.useStickyClasses!==!0||o.manageStickiness()}}var e="fixed",s=["","-o-","-webkit-","-moz-","-ms-"],o="js-is-sticky",n="js-is-stuck";return t.prototype.setStickyPosition=function(){for(var t=this.elStyle,i=this.verticalPosition,o=0;o<s.length;o+=1)t.position=s[o]+"sticky";""!==t.position&&(e=t.position,"top"===i&&(t[i]=this.stickyBitStickyOffset+"px"))},t.prototype.manageStickiness=function(){function t(){var t=c.scrollY;if(t<u)a.contains(o)&&(a.remove(o),f.position="");else if(t>u&&t<d)a.contains(o)||a.add(o),a.contains(n)&&(a.remove(n),f.bottom=""),f.position=e,f[r]=l+"px";else if(t>d&&!a.contains(n)){if(a.remove(o),a.add(n),"fixed"!==e)return;f.top="",f.bottom="0",f.position="absolute"}}function i(){p||(p=!0,t(),window.setTimeout(function(){p=!1},0))}var s=this.el,c=this.scrollTarget,r=this.verticalPosition,l=this.stickyBitStickyOffset,f=this.elStyle,a=s.classList,y=s.parentNode,u=s.getBoundingClientRect().top,d=u+y.offsetHeight-s.offsetHeight;y.classList.add("js-stickybit-parent");var p=void 0;c.addEventListener("scroll",function(){return c.requestAnimationFrame(i)})},i});

package.json

 {
   "name": "stickybits",
-  "version": "1.1.3",
+  "version": "1.2.3",
   "description": "Stickybits is a lightweight (<2KB) alternative to `position: sticky` polyfills",
@@ -26,2 +26,3 @@ "main": "dist/stickybits.js",
     "test": "gulp test",
+    "lint": "eslint .",
     "rollup": "rollup -c --environment entry:stickybits && rollup -c --environment entry:jquery.stickybits",
@@ -47,3 +48,3 @@ "build": "rollup -c --environment entry:stickybits && rollup -c --environment entry:jquery.stickybits && gulp",
     "debug": "^2.2.0",
-    "eslint": "^3.9.0",
+    "eslint": "^3.19.0",
     "eslint-config-airbnb": "^14.1.0",
@@ -50,0 +51,0 @@ "eslint-plugin-import": "^2.0.1",

src/jquery.stickybits.js

@@ -8,5 +8,4 @@ import stickybits from './stickybits';
       stickybits(this, opts);
-      return;
     };
   }
 }

src/stickybits.js

@@ -0,16 +1,17 @@
+let positionStickyVal = 'fixed';
+const browserPrefix = ['', '-o-', '-webkit-', '-moz-', '-ms-'];
+const stickyBitClass = 'js-is-sticky';
+const stickyBitIsStuckClass = 'js-is-stuck';
+
 function Stickybit(target, o) {
-  const opts = {
-    scrollTarget: window,
-    stickyBitStickyOffset: 0,
-    verticalPosition: 'top',
-    useStickyClasses: false,
-  };
   this.el = target;
-  this.scrollTarget = (o && o.scrollTarget) || opts.scrollTarget;
-  this.stickyBitStickyOffset = (o && o.stickyBitStickyOffset) || opts.stickyBitStickyOffset;
-  this.verticalPosition = (o && o.verticalPosition) || opts.verticalPosition;
-  this.useStickyClasses = (o && o.useStickyClasses) || opts.useStickyClasses;
-  const el = this.el;
-  const elStyle = el.style;
-  const browserPrefix = ['', '-o-', '-webkit-', '-moz-', '-ms-'];
+  this.scrollTarget = (o && o.scrollTarget) || window;
+  this.stickyBitStickyOffset = (o && o.stickyBitStickyOffset) || 0;
+  this.verticalPosition = (o && o.verticalPosition) || 'top';
+  this.useStickyClasses = (o && o.useStickyClasses) || false;
+  this.elStyle = this.el.style;
+}
+
+Stickybit.prototype.setStickyPosition = function setStickyPosition() {
+  const elStyle = this.elStyle;
   const verticalPosition = this.verticalPosition;
@@ -20,3 +21,2 @@ for (let i = 0; i < browserPrefix.length; i += 1) {
   }
-  let positionStickyVal = 'fixed';
   if (elStyle.position !== '') {
@@ -27,10 +27,13 @@ positionStickyVal = elStyle.position;
     }
-    if (this.useStickyClasses === false) return;
   }
+};
+
+Stickybit.prototype.manageStickiness = function manageStickiness() {
+  const el = this.el;
+  const scrollTarget = this.scrollTarget;
+  const verticalPosition = this.verticalPosition;
   const stickyBitStickyOffset = this.stickyBitStickyOffset;
+  const elStyle = this.elStyle;
   const elClasses = el.classList;
   const elParent = el.parentNode;
-  const scrollTarget = this.scrollTarget;
-  const stickyBitClass = 'js-is-sticky';
-  const stickyBitIsStuckClass = 'js-is-stuck';
   const stickyBitStart = el.getBoundingClientRect().top;
@@ -46,3 +49,2 @@ const stickyBitStop = (stickyBitStart + elParent.offsetHeight) - el.offsetHeight;
       }
-      return;
     } else if (scroll > stickyBitStart && scroll < stickyBitStop) {
@@ -56,3 +58,2 @@ if (!elClasses.contains(stickyBitClass)) elClasses.add(stickyBitClass);
       elStyle[verticalPosition] = `${stickyBitStickyOffset}px`;
-      return;
     } else if (scroll > stickyBitStop && !elClasses.contains(stickyBitIsStuckClass)) {
@@ -65,8 +66,14 @@ elClasses.remove(stickyBitClass);
       elStyle.position = 'absolute';
-      return;
     }
-    return;
   }
-  scrollTarget.addEventListener('scroll', () => scrollTarget.requestAnimationFrame(stickiness));
-}
+  let invoked;
+  function checkStickiness() {
+    if (invoked) return;
+    invoked = true;
+    stickiness();
+    window.setTimeout(() => { invoked = false; }, 0);
+  }
+  scrollTarget.addEventListener('scroll', () => scrollTarget.requestAnimationFrame(checkStickiness));
+};
+
 export default function stickybits(target, o) {
@@ -79,4 +86,9 @@ let els = typeof target === 'string' ? document.querySelectorAll(target) : target;
     stickyBit = new Stickybit(el, o);
+    stickyBit.setStickyPosition();
+    if (
+      stickyBit.positionStickyVal === 'fixed' ||
+      stickyBit.useStickyClasses === true) {
+      stickyBit.manageStickiness();
+    }
   }
-  return stickyBit;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24727

increased by4.54%

Lines of code

298

increased by7.97%

No dependency changes