stickybits - npm Package Compare versions

Comparing version 1.3.8 to 1.3.10

dist/jquery.stickybits.js

@@ -18,7 +18,5 @@ (function (global, factory) {
     - target = el (DOM element)
-    - offset = 0 || 'dealer's choice'
+    - offset = 0 || dealer's choice
     - verticalPosition = top || bottom
-    - useStickyClasses =
-    - elStyles = CSS Styles
-    - positionVal = fixed || sticky
+    - useStickyClasses = boolean
   */
@@ -76,10 +74,20 @@ this.el = target;
   var styles = this.styles;
-  var classes = el.classList;
   var win = window;
-  var rAF = win.requestAnimationFrame;
+  var rAF = typeof win.requestAnimationFrame !== 'undefined' ? win.requestAnimationFrame : function rAFDummy(f) {
+    f();
+  };
 
   // setup css classes
-  parent.classList.add('js-stickybit-parent');
+  parent.className += ' js-stickybit-parent';
   var stickyClass = 'js-is-sticky';
   var stuckClass = 'js-is-stuck';
+  // r arg = removeClass
+  // a arg = addClass
+  function toggleClasses(r, a) {
+    var cArray = el.className.split(' ');
+    if (a && cArray.indexOf(a) === -1) cArray.push(a);
+    var rItem = cArray.indexOf(r);
+    if (rItem !== -1) cArray.splice(rItem, 1);
+    el.className = cArray.join(' ');
+  }
 
@@ -99,4 +107,3 @@ // manageState
       rAF(function () {
-        classes.add(stickyClass);
-        if (classes.contains(stuckClass)) classes.remove(stuckClass);
+        toggleClasses(stuckClass, stickyClass);
         styles.bottom = '';
@@ -109,3 +116,3 @@ styles.position = pv;
       rAF(function () {
-        classes.remove(stickyClass);
+        toggleClasses(stickyClass);
         if (pv === 'fixed') styles.position = '';
@@ -116,4 +123,3 @@ });
       rAF(function () {
-        classes.remove(stickyClass);
-        classes.add(stuckClass);
+        toggleClasses(stickyClass, stuckClass);
         if (pv !== 'fixed') return;
@@ -145,4 +151,12 @@ styles.top = '';
   // cleanup CSS classes
-  el.classList.remove('js-is-sticky', 'js-is-stuck');
-  el.parentNode.classList.remove('js-stickybit-parent');
+  function removeClass(selector, c) {
+    var s = selector;
+    var cArray = s.className.split(' ');
+    var cItem = cArray.indexOf(c);
+    if (cItem !== -1) cArray.splice(cItem, 1);
+    s.className = cArray.join(' ');
+  }
+  removeClass(el, 'js-is-sticky');
+  removeClass(el, 'js-is-stuck');
+  removeClass(el.parentNode, 'js-stickybit-parent');
   // remove scroll event listener
@@ -155,9 +169,9 @@ window.removeEventListener('scroll', this.manageState);
 function MultiBits(userInstances) {
-  var _this = this;
-
   this.privateInstances = userInstances || [];
+  var instances = this.privateInstances;
   this.cleanup = function () {
-    return _this.privateInstances.forEach(function (instance) {
-      return instance.cleanup();
-    });
+    for (var i = 0; i < instances.length; i += 1) {
+      var instance = instances[i];
+      instance.cleanup();
+    }
   };
@@ -164,0 +178,0 @@ }

dist/jquery.stickybits.min.js

 /**
- * stickybits - Stickybits is a lightweight (~2KB) alternative to `position: sticky` polyfills
- * @version v1.3.7
+ * stickybits - Stickybits is a lightweight (~2.7KB) alternative to `position: sticky` polyfills
+ * @version v1.3.10
  * @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()}(0,function(){"use strict";function t(t,i){if("undefined"==typeof window)throw Error("stickybits requires `window`");return this.el=t,this.offset=i&&i.stickyBitStickyOffset||0,this.vp=i&&i.verticalPosition||"top",this.useClasses=i&&i.useStickyClasses||!1,this.styles=this.el.style,this.positionVal="fixed",this.setStickyPosition(),"fixed"!==this.positionVal&&!0!==this.useClasses||this.manageStickiness(),this}function i(t){var i=this;this.privateInstances=t||[],this.cleanup=function(){return i.privateInstances.forEach(function(t){return t.cleanup()})}}function s(s,e){var n="string"==typeof s?document.querySelectorAll(s):s;"length"in n||(n=[n]);for(var o=[],a=0;a<n.length;a+=1){var c=n[a];o.push(new t(c,e))}return new i(o)}if(t.prototype.setStickyPosition=function(){for(var t=["","-o-","-webkit-","-moz-","-ms-"],i=this.styles,s=this.vp,e=0;e<t.length;e+=1)i.position=t[e]+"sticky";return""!==i.position&&(this.positionVal=i.position,"top"===s&&(i[s]=this.offset+"px")),this},t.prototype.manageStickiness=function(){var t=this.el,i=t.parentNode,s=this.positionVal,e=this.vp,n=this.offset,o=this.styles,a=t.classList,c=window,r=c.requestAnimationFrame;i.classList.add("js-stickybit-parent");var f=i.getBoundingClientRect().top,u=f+i.offsetHeight-(t.offsetHeight-n),p="default";return this.manageState=function(){var t=c.scrollY||c.pageYOffset,i=t>f&&t<u&&("default"===p||"stuck"===p),h=t<f&&"sticky"===p,l=t>u&&"sticky"===p;i?(p="sticky",r(function(){a.add("js-is-sticky"),a.contains("js-is-stuck")&&a.remove("js-is-stuck"),o.bottom="",o.position=s,o[e]=n+"px"})):h?(p="default",r(function(){a.remove("js-is-sticky"),"fixed"===s&&(o.position="")})):l&&(p="stuck",r(function(){a.remove("js-is-sticky"),a.add("js-is-stuck"),"fixed"===s&&(o.top="",o.bottom="0",o.position="absolute")}))},c.addEventListener("scroll",this.manageState),this},t.prototype.cleanup=function(){var t=this.el,i=this.styles;i.position="",i[this.vp]="",t.classList.remove("js-is-sticky","js-is-stuck"),t.parentNode.classList.remove("js-stickybit-parent"),window.removeEventListener("scroll",this.manageState),this.manageState=!1},"undefined"!=typeof window){var e=window.$||window.jQuery||window.Zepto;e&&(e.fn.stickybits=function(t){s(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){if("undefined"==typeof window)throw Error("stickybits requires `window`");return this.el=t,this.offset=i&&i.stickyBitStickyOffset||0,this.vp=i&&i.verticalPosition||"top",this.useClasses=i&&i.useStickyClasses||!1,this.styles=this.el.style,this.positionVal="fixed",this.setStickyPosition(),"fixed"!==this.positionVal&&!0!==this.useClasses||this.manageStickiness(),this}function i(t){this.privateInstances=t||[];var i=this.privateInstances;this.cleanup=function(){for(var t=0;t<i.length;t+=1)i[t].cleanup()}}function s(s,e){var n="string"==typeof s?document.querySelectorAll(s):s;"length"in n||(n=[n]);for(var o=[],a=0;a<n.length;a+=1){var c=n[a];o.push(new t(c,e))}return new i(o)}if(t.prototype.setStickyPosition=function(){for(var t=["","-o-","-webkit-","-moz-","-ms-"],i=this.styles,s=this.vp,e=0;e<t.length;e+=1)i.position=t[e]+"sticky";return""!==i.position&&(this.positionVal=i.position,"top"===s&&(i[s]=this.offset+"px")),this},t.prototype.manageStickiness=function(){function t(t,s){var e=i.className.split(" ");s&&-1===e.indexOf(s)&&e.push(s);var n=e.indexOf(t);-1!==n&&e.splice(n,1),i.className=e.join(" ")}var i=this.el,s=i.parentNode,e=this.positionVal,n=this.vp,o=this.offset,a=this.styles,c=window,f=void 0!==c.requestAnimationFrame?c.requestAnimationFrame:function(t){t()};s.className+=" js-stickybit-parent";var r=s.getBoundingClientRect().top,p=r+s.offsetHeight-(i.offsetHeight-o),u="default";return this.manageState=function(){var i=c.scrollY||c.pageYOffset,s=i>r&&i<p&&("default"===u||"stuck"===u),l=i<r&&"sticky"===u,h=i>p&&"sticky"===u;s?(u="sticky",f(function(){t("js-is-stuck","js-is-sticky"),a.bottom="",a.position=e,a[n]=o+"px"})):l?(u="default",f(function(){t("js-is-sticky"),"fixed"===e&&(a.position="")})):h&&(u="stuck",f(function(){t("js-is-sticky","js-is-stuck"),"fixed"===e&&(a.top="",a.bottom="0",a.position="absolute")}))},c.addEventListener("scroll",this.manageState),this},t.prototype.cleanup=function(){function t(t,i){var s=t,e=s.className.split(" "),n=e.indexOf(i);-1!==n&&e.splice(n,1),s.className=e.join(" ")}var i=this.el,s=this.styles;s.position="",s[this.vp]="",t(i,"js-is-sticky"),t(i,"js-is-stuck"),t(i.parentNode,"js-stickybit-parent"),window.removeEventListener("scroll",this.manageState),this.manageState=!1},"undefined"!=typeof window){var e=window.$||window.jQuery||window.Zepto;e&&(e.fn.stickybits=function(t){s(this,t)})}});

dist/stickybits.js

@@ -18,7 +18,5 @@ (function (global, factory) {
     - target = el (DOM element)
-    - offset = 0 || 'dealer's choice'
+    - offset = 0 || dealer's choice
     - verticalPosition = top || bottom
-    - useStickyClasses =
-    - elStyles = CSS Styles
-    - positionVal = fixed || sticky
+    - useStickyClasses = boolean
   */
@@ -76,10 +74,20 @@ this.el = target;
   var styles = this.styles;
-  var classes = el.classList;
   var win = window;
-  var rAF = win.requestAnimationFrame;
+  var rAF = typeof win.requestAnimationFrame !== 'undefined' ? win.requestAnimationFrame : function rAFDummy(f) {
+    f();
+  };
 
   // setup css classes
-  parent.classList.add('js-stickybit-parent');
+  parent.className += ' js-stickybit-parent';
   var stickyClass = 'js-is-sticky';
   var stuckClass = 'js-is-stuck';
+  // r arg = removeClass
+  // a arg = addClass
+  function toggleClasses(r, a) {
+    var cArray = el.className.split(' ');
+    if (a && cArray.indexOf(a) === -1) cArray.push(a);
+    var rItem = cArray.indexOf(r);
+    if (rItem !== -1) cArray.splice(rItem, 1);
+    el.className = cArray.join(' ');
+  }
 
@@ -99,4 +107,3 @@ // manageState
       rAF(function () {
-        classes.add(stickyClass);
-        if (classes.contains(stuckClass)) classes.remove(stuckClass);
+        toggleClasses(stuckClass, stickyClass);
         styles.bottom = '';
@@ -109,3 +116,3 @@ styles.position = pv;
       rAF(function () {
-        classes.remove(stickyClass);
+        toggleClasses(stickyClass);
         if (pv === 'fixed') styles.position = '';
@@ -116,4 +123,3 @@ });
       rAF(function () {
-        classes.remove(stickyClass);
-        classes.add(stuckClass);
+        toggleClasses(stickyClass, stuckClass);
         if (pv !== 'fixed') return;
@@ -145,4 +151,12 @@ styles.top = '';
   // cleanup CSS classes
-  el.classList.remove('js-is-sticky', 'js-is-stuck');
-  el.parentNode.classList.remove('js-stickybit-parent');
+  function removeClass(selector, c) {
+    var s = selector;
+    var cArray = s.className.split(' ');
+    var cItem = cArray.indexOf(c);
+    if (cItem !== -1) cArray.splice(cItem, 1);
+    s.className = cArray.join(' ');
+  }
+  removeClass(el, 'js-is-sticky');
+  removeClass(el, 'js-is-stuck');
+  removeClass(el.parentNode, 'js-stickybit-parent');
   // remove scroll event listener
@@ -155,9 +169,9 @@ window.removeEventListener('scroll', this.manageState);
 function MultiBits(userInstances) {
-  var _this = this;
-
   this.privateInstances = userInstances || [];
+  var instances = this.privateInstances;
   this.cleanup = function () {
-    return _this.privateInstances.forEach(function (instance) {
-      return instance.cleanup();
-    });
+    for (var i = 0; i < instances.length; i += 1) {
+      var instance = instances[i];
+      instance.cleanup();
+    }
   };
@@ -164,0 +178,0 @@ }

dist/stickybits.min.js

 /**
- * stickybits - Stickybits is a lightweight (~2KB) alternative to `position: sticky` polyfills
- * @version v1.3.7
+ * stickybits - Stickybits is a lightweight (~2.7KB) alternative to `position: sticky` polyfills
+ * @version v1.3.10
  * @link https://github.com/dollarshaveclub/stickybits#readme
  * @author Jeff Wainwright <[e-mail]>
  * @license MIT */
-!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?module.exports=s():"function"==typeof define&&define.amd?define(s):t.stickybits=s()}(this,function(){"use strict";function t(t,s){if("undefined"==typeof window)throw Error("stickybits requires `window`");return this.el=t,this.offset=s&&s.stickyBitStickyOffset||0,this.vp=s&&s.verticalPosition||"top",this.useClasses=s&&s.useStickyClasses||!1,this.styles=this.el.style,this.positionVal="fixed",this.setStickyPosition(),"fixed"!==this.positionVal&&!0!==this.useClasses||this.manageStickiness(),this}function s(t){var s=this;this.privateInstances=t||[],this.cleanup=function(){return s.privateInstances.forEach(function(t){return t.cleanup()})}}return t.prototype.setStickyPosition=function(){for(var t=["","-o-","-webkit-","-moz-","-ms-"],s=this.styles,i=this.vp,e=0;e<t.length;e+=1)s.position=t[e]+"sticky";return""!==s.position&&(this.positionVal=s.position,"top"===i&&(s[i]=this.offset+"px")),this},t.prototype.manageStickiness=function(){var t=this.el,s=t.parentNode,i=this.positionVal,e=this.vp,n=this.offset,o=this.styles,a=t.classList,r=window,c=r.requestAnimationFrame;s.classList.add("js-stickybit-parent");var f=s.getBoundingClientRect().top,u=f+s.offsetHeight-(t.offsetHeight-n),p="default";return this.manageState=function(){var t=r.scrollY||r.pageYOffset,s=t>f&&t<u&&("default"===p||"stuck"===p),l=t<f&&"sticky"===p,h=t>u&&"sticky"===p;s?(p="sticky",c(function(){a.add("js-is-sticky"),a.contains("js-is-stuck")&&a.remove("js-is-stuck"),o.bottom="",o.position=i,o[e]=n+"px"})):l?(p="default",c(function(){a.remove("js-is-sticky"),"fixed"===i&&(o.position="")})):h&&(p="stuck",c(function(){a.remove("js-is-sticky"),a.add("js-is-stuck"),"fixed"===i&&(o.top="",o.bottom="0",o.position="absolute")}))},r.addEventListener("scroll",this.manageState),this},t.prototype.cleanup=function(){var t=this.el,s=this.styles;s.position="",s[this.vp]="",t.classList.remove("js-is-sticky","js-is-stuck"),t.parentNode.classList.remove("js-stickybit-parent"),window.removeEventListener("scroll",this.manageState),this.manageState=!1},function(i,e){var n="string"==typeof i?document.querySelectorAll(i):i;"length"in n||(n=[n]);for(var o=[],a=0;a<n.length;a+=1){var r=n[a];o.push(new t(r,e))}return new s(o)}});
+!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){if("undefined"==typeof window)throw Error("stickybits requires `window`");return this.el=t,this.offset=i&&i.stickyBitStickyOffset||0,this.vp=i&&i.verticalPosition||"top",this.useClasses=i&&i.useStickyClasses||!1,this.styles=this.el.style,this.positionVal="fixed",this.setStickyPosition(),"fixed"!==this.positionVal&&!0!==this.useClasses||this.manageStickiness(),this}function i(t){this.privateInstances=t||[];var i=this.privateInstances;this.cleanup=function(){for(var t=0;t<i.length;t+=1)i[t].cleanup()}}return t.prototype.setStickyPosition=function(){for(var t=["","-o-","-webkit-","-moz-","-ms-"],i=this.styles,s=this.vp,e=0;e<t.length;e+=1)i.position=t[e]+"sticky";return""!==i.position&&(this.positionVal=i.position,"top"===s&&(i[s]=this.offset+"px")),this},t.prototype.manageStickiness=function(){function t(t,s){var e=i.className.split(" ");s&&-1===e.indexOf(s)&&e.push(s);var n=e.indexOf(t);-1!==n&&e.splice(n,1),i.className=e.join(" ")}var i=this.el,s=i.parentNode,e=this.positionVal,n=this.vp,o=this.offset,a=this.styles,c=window,r=void 0!==c.requestAnimationFrame?c.requestAnimationFrame:function(t){t()};s.className+=" js-stickybit-parent";var f=s.getBoundingClientRect().top,p=f+s.offsetHeight-(i.offsetHeight-o),u="default";return this.manageState=function(){var i=c.scrollY||c.pageYOffset,s=i>f&&i<p&&("default"===u||"stuck"===u),l=i<f&&"sticky"===u,h=i>p&&"sticky"===u;s?(u="sticky",r(function(){t("js-is-stuck","js-is-sticky"),a.bottom="",a.position=e,a[n]=o+"px"})):l?(u="default",r(function(){t("js-is-sticky"),"fixed"===e&&(a.position="")})):h&&(u="stuck",r(function(){t("js-is-sticky","js-is-stuck"),"fixed"===e&&(a.top="",a.bottom="0",a.position="absolute")}))},c.addEventListener("scroll",this.manageState),this},t.prototype.cleanup=function(){function t(t,i){var s=t,e=s.className.split(" "),n=e.indexOf(i);-1!==n&&e.splice(n,1),s.className=e.join(" ")}var i=this.el,s=this.styles;s.position="",s[this.vp]="",t(i,"js-is-sticky"),t(i,"js-is-stuck"),t(i.parentNode,"js-stickybit-parent"),window.removeEventListener("scroll",this.manageState),this.manageState=!1},function(s,e){var n="string"==typeof s?document.querySelectorAll(s):s;"length"in n||(n=[n]);for(var o=[],a=0;a<n.length;a+=1){var c=n[a];o.push(new t(c,e))}return new i(o)}});

package.json

 {
   "name": "stickybits",
-  "version": "1.3.8",
-  "description": "Stickybits is a lightweight (~2KB) alternative to `position: sticky` polyfills",
+  "version": "1.3.10",
+  "description": "Stickybits is a lightweight alternative to `position: sticky` polyfills",
   "main": "dist/stickybits.js",
@@ -59,3 +59,3 @@ "files": [
     "qunit": "^1.0.0",
-    "rollup": "^0.42.0",
+    "rollup": "^0.45.1",
     "rollup-plugin-babel": "^2.6.1",
@@ -62,0 +62,0 @@ "rollup-plugin-commonjs": "^8.0.2",

README.md

@@ -26,3 +26,3 @@ <p align="center">
 
-> Stickybits is a lightweight (~2KB) alternative to `position: sticky` polyfills. It works perfectly for things like sticky headers.
+> Stickybits is a lightweight alternative to `position: sticky` polyfills. It works perfectly for things like sticky headers.
 
@@ -34,3 +34,3 @@ **Stickybits is awesome because:**
 -  in its simplest use case, a `scroll` event listener will not be used if `position: sticky` is supported.
--  it is super simple & lightweight (~2kb minified)
+-  it is super simple & lightweight (~2.7kb minified)
 
@@ -195,4 +195,8 @@ <hr />
 
+## Browser Compatibility
+
+Stickybits works in all modern browsers including Internet Explorer 9 and above. Please file and [issue](https://github.com/dollarshaveclub/stickybits/issues) with browser compatibility quirks. 
+
 ### Thanks
 
 This plugin was heavily influenced by [Filament Group](https://www.filamentgroup.com/)'s awesome [Fixed-sticky](https://github.com/filamentgroup/fixed-sticky) jQuery plugin. Thanks to them for getting my mind going on this a while back. Thanks to [Peloton Cycle](https://github.com/pelotoncycle/)'s [Frame Throttle](https://github.com/pelotoncycle/frame-throttle) for an insightful solve for optimizing `frame throttling`. 

src/stickybits.js

@@ -12,7 +12,5 @@ /*
     - target = el (DOM element)
-    - offset = 0 || 'dealer's choice'
+    - offset = 0 || dealer's choice
     - verticalPosition = top || bottom
-    - useStickyClasses =
-    - elStyles = CSS Styles
-    - positionVal = fixed || sticky
+    - useStickyClasses = boolean
   */
@@ -72,10 +70,18 @@ this.el = target
   const styles = this.styles
-  const classes = el.classList
   const win = window
-  const rAF = win.requestAnimationFrame
+  const rAF = typeof win.requestAnimationFrame !== 'undefined' ? win.requestAnimationFrame : function rAFDummy(f) { f() }
 
   // setup css classes
-  parent.classList.add('js-stickybit-parent')
+  parent.className += ' js-stickybit-parent'
   const stickyClass = 'js-is-sticky'
   const stuckClass = 'js-is-stuck'
+  // r arg = removeClass
+  // a arg = addClass
+  function toggleClasses(r, a) {
+    const cArray = el.className.split(' ')
+    if (a && cArray.indexOf(a) === -1) cArray.push(a)
+    const rItem = cArray.indexOf(r)
+    if (rItem !== -1) cArray.splice(rItem, 1)
+    el.className = cArray.join(' ')
+  }
 
@@ -97,4 +103,3 @@ // manageState
       rAF(() => {
-        classes.add(stickyClass)
-        if (classes.contains(stuckClass)) classes.remove(stuckClass)
+        toggleClasses(stuckClass, stickyClass)
         styles.bottom = ''
@@ -107,3 +112,3 @@ styles.position = pv
       rAF(() => {
-        classes.remove(stickyClass)
+        toggleClasses(stickyClass)
         if (pv === 'fixed') styles.position = ''
@@ -114,4 +119,3 @@ })
       rAF(() => {
-        classes.remove(stickyClass)
-        classes.add(stuckClass)
+        toggleClasses(stickyClass, stuckClass)
         if (pv !== 'fixed') return
@@ -143,4 +147,12 @@ styles.top = ''
   // cleanup CSS classes
-  el.classList.remove('js-is-sticky', 'js-is-stuck')
-  el.parentNode.classList.remove('js-stickybit-parent')
+  function removeClass(selector, c) {
+    const s = selector
+    const cArray = s.className.split(' ')
+    const cItem = cArray.indexOf(c)
+    if (cItem !== -1) cArray.splice(cItem, 1)
+    s.className = cArray.join(' ')
+  }
+  removeClass(el, 'js-is-sticky')
+  removeClass(el, 'js-is-stuck')
+  removeClass(el.parentNode, 'js-stickybit-parent')
   // remove scroll event listener
@@ -154,3 +166,9 @@ window.removeEventListener('scroll', this.manageState)
   this.privateInstances = userInstances || []
-  this.cleanup = () => this.privateInstances.forEach(instance => instance.cleanup())
+  const instances = this.privateInstances
+  this.cleanup = () => {
+    for (let i = 0; i < instances.length; i += 1) {
+      const instance = instances[i]
+      instance.cleanup()
+    }
+  }
 }
@@ -157,0 +175,0 @@

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

32523

increased by7.01%

Lines of code

545

increased by9.66%

Number of lines in readme file

200

increased by2.04%

No dependency changes