stickybits - npm Package Compare versions

Comparing version 3.0.1 to 3.0.3

dist/jquery.stickybits.js

@@ -0,1 +1,8 @@
+/**
+  stickybits - Stickybits is a lightweight alternative to `position: sticky` polyfills
+  @version v3.0.3
+  @link https://github.com/dollarshaveclub/stickybits#readme
+  @author Jeff Wainwright <[e-mail]> (https://jeffry.in)
+  @license MIT
+**/
 (function (global, factory) {
@@ -59,5 +66,6 @@ typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
 */
-function Stickybits(target, obj) {
-  var o = typeof obj !== 'undefined' ? obj : {};
-  this.version = '2.1.2';
+function Stickybits(target) {
+  var o = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  this.version = '"3.0.3"';
   this.userAgent = window.navigator.userAgent || 'no `userAgent` provided by the browser';
@@ -68,3 +76,3 @@ this.props = {
     parentClass: o.parentClass || 'js-stickybit-parent',
-    scrollEl: o.scrollEl || window,
+    scrollEl: document.querySelector(o.scrollEl) || window,
     stickyClass: o.stickyClass || 'js-is-sticky',
@@ -92,8 +100,6 @@ stuckClass: o.stuckClass || 'js-is-stuck',
     var styles = el.style;
-    if (vp === 'top' && !ns) styles[vp] = p.stickyBitStickyOffset + 'px';
-    if (pv !== 'fixed' && p.useStickyClasses === false) {
-      styles.position = pv;
-    } else {
-      // const stickyManager = new ManageSticky(el, p)
-      if (pv !== 'fixed') styles.position = pv;
+    // set vertical position
+    styles[vp] = vp === 'top' && !ns ? p.stickyBitStickyOffset + 'px' : '';
+    styles.position = pv !== 'fixed' ? pv : '';
+    if (pv === 'fixed' || p.useStickyClasses) {
       var instance = this.addInstance(el, p);
@@ -121,4 +127,3 @@ // instances are an array of objects
   }
-  var stickyProp = 'fixed';
-  if (typeof test.position !== 'undefined') stickyProp = test.position;
+  var stickyProp = test.position ? test.position : 'fixed';
   test.position = '';
@@ -160,11 +165,9 @@ return stickyProp;
   };
-  var p = item.props;
+  this.isWin = this.props.scrollEl === window;
+  var se = this.isWin ? window : this.getClosestParent(item.el, item.props.scrollEl);
+  this.computeScrollOffsets(item);
   item.parent.className += ' ' + props.parentClass;
-  var se = p.scrollEl;
-  item.isWin = se === window;
-  if (!item.isWin) se = this.getClosestParent(item.el, se);
-  this.computeScrollOffsets(item);
   item.state = 'default';
   item.stateContainer = function () {
-    _this.manageState(item);
+    return _this.manageState(item);
   };
@@ -183,3 +186,3 @@ se.addEventListener('scroll', item.stateContainer);
 */
-Stickybits.prototype.getClosestParent = function getClosestParent(el, matchSelector) {
+Stickybits.prototype.getClosestParent = function (el, matchSelector) {
   // p = parent element
@@ -209,17 +212,9 @@ var p = document.querySelector(matchSelector);
   var parent = it.parent;
-  var iw = it.isWin;
-  var scrollElOffset = 0;
-  var stickyStart = parent.getBoundingClientRect().top;
-  if (!iw && p.positionVal === 'fixed') {
-    scrollElOffset = p.scrollEl.getBoundingClientRect().top;
-    stickyStart = parent.getBoundingClientRect().top - scrollElOffset;
-  }
+  var isCustom = !this.isWin && p.positionVal === 'fixed';
+  var isBottom = p.verticalPosition !== 'bottom';
+  var scrollElOffset = isCustom ? p.scrollEl.getBoundingClientRect().top : 0;
+  var stickyStart = isCustom ? parent.getBoundingClientRect().top - scrollElOffset : parent.getBoundingClientRect().top;
   it.offset = scrollElOffset + p.stickyBitStickyOffset;
-  if (p.verticalPosition !== 'bottom') {
-    it.stickyStart = stickyStart - it.offset;
-    it.stickyStop = stickyStart + parent.offsetHeight - (it.el.offsetHeight + it.offset);
-  } else {
-    it.stickyStart = 0;
-    it.stickyStop = stickyStart + parent.offsetHeight;
-  }
+  it.stickyStart = isBottom ? stickyStart - it.offset : 0;
+  it.stickyStop = isBottom ? stickyStart + parent.offsetHeight - (it.el.offsetHeight + it.offset) : stickyStart + parent.offsetHeight;
   return it;
@@ -235,3 +230,3 @@ };
 */
-Stickybits.prototype.toggleClasses = function toggleClasses(el, r, a) {
+Stickybits.prototype.toggleClasses = function (el, r, a) {
   var e = el;
@@ -275,8 +270,7 @@ var cArray = e.className.split(' ');
   */
-  var rAF = se.requestAnimationFrame;
-  if (!it.isWin || typeof rAF === 'undefined') {
-    rAF = function rAFDummy(f) {
-      f();
-    };
-  }
+  var rAFStub = function rAFDummy(f) {
+    f();
+  };
+  var rAF = !this.isWin ? rAFStub : window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || rAFStub;
+
   /*
@@ -291,3 +285,3 @@ define scroll vars
   var tC = this.toggleClasses;
-  var scroll = it.isWin ? se.scrollY || se.pageYOffset : se.scrollTop;
+  var scroll = this.isWin || se.getBoundingClientRect().top ? window.scrollY || window.pageYOffset : se.scrollTop;
   var notSticky = scroll > start && scroll < stop && (state === 'default' || state === 'stuck');
@@ -294,0 +288,0 @@ var isSticky = scroll <= start && state === 'sticky';

dist/jquery.stickybits.min.js

 /**
   stickybits - Stickybits is a lightweight alternative to `position: sticky` polyfills
-  @version v3.0.1
+  @version v3.0.3
   @link https://github.com/dollarshaveclub/stickybits#readme
@@ -8,2 +8,2 @@ @author Jeff Wainwright <[e-mail]> (https://jeffry.in)
 **/
-!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?s():"function"==typeof define&&define.amd?define(s):s()}(0,function(){"use strict";function t(t,s){var e=void 0!==s?s:{};this.version='"3.0.1"',this.userAgent=window.navigator.userAgent||"no `userAgent` provided by the browser",this.props={noStyles:e.noStyles||!1,stickyBitStickyOffset:e.stickyBitStickyOffset||0,parentClass:e.parentClass||"js-stickybit-parent",scrollEl:e.scrollEl||window,stickyClass:e.stickyClass||"js-is-sticky",stuckClass:e.stuckClass||"js-is-stuck",useStickyClasses:e.useStickyClasses||!1,verticalPosition:e.verticalPosition||"top"};var i=this.props;i.positionVal=this.definePosition()||"fixed";var o=i.verticalPosition,n=i.noStyles,r=i.positionVal;this.els="string"==typeof t?document.querySelectorAll(t):t,"length"in this.els||(this.els=[this.els]),this.instances=[];for(var a=0;a<this.els.length;a+=1){var l=this.els[a],c=l.style;if(c[o]="top"!==o||n?"":i.stickyBitStickyOffset+"px",c.position=r,"fixed"===r||i.useStickyClasses){var p=this.addInstance(l,i);this.instances.push(p)}}return this}if(t.prototype.definePosition=function(){for(var t=["","-o-","-webkit-","-moz-","-ms-"],s=document.head.style,e=0;e<t.length;e+=1)s.position=t[e]+"sticky";var i=s.position?s.position:"fixed";return s.position="",i},t.prototype.addInstance=function(t,s){var e=this,i={el:t,parent:t.parentNode,props:s};this.isWin=this.props.scrollEl===window;var o=this.isWin?window:this.getClosestParent(i.el,i.props.scrollEl);return this.computeScrollOffsets(i),i.parent.className+=" "+s.parentClass,i.state="default",i.stateContainer=function(){return e.manageState(i)},o.addEventListener("scroll",i.stateContainer),i},t.prototype.getClosestParent=function(t,s){var e=document.querySelector(s),i=t;if(i.parentElement===e)return e;for(;i.parentElement!==e;)i=i.parentElement;return e},t.prototype.computeScrollOffsets=function(t){var s=t,e=s.props,i=s.parent,o=!this.isWin&&"fixed"===e.positionVal,n="bottom"!==e.verticalPosition,r=o?e.scrollEl.getBoundingClientRect().top:0,a=o?i.getBoundingClientRect().top-r:i.getBoundingClientRect().top;return s.offset=r+e.stickyBitStickyOffset,s.stickyStart=n?a-s.offset:0,s.stickyStop=n?a+i.offsetHeight-(s.el.offsetHeight+s.offset):a+i.offsetHeight,s},t.prototype.toggleClasses=function(t,s,e){var i=t,o=i.className.split(" ");e&&-1===o.indexOf(e)&&o.push(e);var n=o.indexOf(s);-1!==n&&o.splice(n,1),i.className=o.join(" ")},t.prototype.manageState=function(t){var s=t,e=s.el,i=s.props,o=s.state,n=s.stickyStart,r=s.stickyStop,a=e.style,l=i.noStyles,c=i.positionVal,p=i.scrollEl,f=i.stickyClass,u=i.stuckClass,d=i.verticalPosition,y=function(t){t()},h=this.isWin&&(window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame)||y,k=this.toggleClasses,m=this.isWin||document.querySelector(p).getBoundingClientRect().top?window.scrollY||window.pageYOffset:document.querySelector(p).scrollTop,v=m<=n&&"sticky"===o,g=m>=r&&"sticky"===o;return m>n&&m<r&&("default"===o||"stuck"===o)?(s.state="sticky",h(function(){k(e,u,f),a.position=c,l||(a.bottom="",a[d]=i.stickyBitStickyOffset+"px")})):v?(s.state="default",h(function(){k(e,f),"fixed"===c&&(a.position="")})):g&&(s.state="stuck",h(function(){k(e,f,u),"fixed"!==c||l||(a.top="",a.bottom="0",a.position="absolute")})),s},t.prototype.removeInstance=function(t){var s=t.el,e=t.props,i=this.toggleClasses;s.style.position="",s.style[e.verticalPosition]="",i(s,e.stickyClass),i(s,e.stuckClass),i(s.parentNode,e.parentClass)},t.prototype.cleanup=function(){for(var t=0;t<this.instances.length;t+=1){var s=this.instances[t];s.props.scrollEl.removeEventListener("scroll",s.stateContainer),this.removeInstance(s)}this.manageState=!1,this.instances=[]},"undefined"!=typeof window){var s=window.$||window.jQuery||window.Zepto;s&&(s.fn.stickybits=function(s){new t(this,s)})}});
+!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?s():"function"==typeof define&&define.amd?define(s):s()}(0,function(){"use strict";function t(t){var s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.version='"3.0.3"',this.userAgent=window.navigator.userAgent||"no `userAgent` provided by the browser",this.props={noStyles:s.noStyles||!1,stickyBitStickyOffset:s.stickyBitStickyOffset||0,parentClass:s.parentClass||"js-stickybit-parent",scrollEl:document.querySelector(s.scrollEl)||window,stickyClass:s.stickyClass||"js-is-sticky",stuckClass:s.stuckClass||"js-is-stuck",useStickyClasses:s.useStickyClasses||!1,verticalPosition:s.verticalPosition||"top"};var e=this.props;e.positionVal=this.definePosition()||"fixed";var i=e.verticalPosition,o=e.noStyles,n=e.positionVal;this.els="string"==typeof t?document.querySelectorAll(t):t,"length"in this.els||(this.els=[this.els]),this.instances=[];for(var r=0;r<this.els.length;r+=1){var a=this.els[r],l=a.style;if(l[i]="top"!==i||o?"":e.stickyBitStickyOffset+"px",l.position="fixed"!==n?n:"","fixed"===n||e.useStickyClasses){var c=this.addInstance(a,e);this.instances.push(c)}}return this}if(t.prototype.definePosition=function(){for(var t=["","-o-","-webkit-","-moz-","-ms-"],s=document.head.style,e=0;e<t.length;e+=1)s.position=t[e]+"sticky";var i=s.position?s.position:"fixed";return s.position="",i},t.prototype.addInstance=function(t,s){var e=this,i={el:t,parent:t.parentNode,props:s};this.isWin=this.props.scrollEl===window;var o=this.isWin?window:this.getClosestParent(i.el,i.props.scrollEl);return this.computeScrollOffsets(i),i.parent.className+=" "+s.parentClass,i.state="default",i.stateContainer=function(){return e.manageState(i)},o.addEventListener("scroll",i.stateContainer),i},t.prototype.getClosestParent=function(t,s){var e=document.querySelector(s),i=t;if(i.parentElement===e)return e;for(;i.parentElement!==e;)i=i.parentElement;return e},t.prototype.computeScrollOffsets=function(t){var s=t,e=s.props,i=s.parent,o=!this.isWin&&"fixed"===e.positionVal,n="bottom"!==e.verticalPosition,r=o?e.scrollEl.getBoundingClientRect().top:0,a=o?i.getBoundingClientRect().top-r:i.getBoundingClientRect().top;return s.offset=r+e.stickyBitStickyOffset,s.stickyStart=n?a-s.offset:0,s.stickyStop=n?a+i.offsetHeight-(s.el.offsetHeight+s.offset):a+i.offsetHeight,s},t.prototype.toggleClasses=function(t,s,e){var i=t,o=i.className.split(" ");e&&-1===o.indexOf(e)&&o.push(e);var n=o.indexOf(s);-1!==n&&o.splice(n,1),i.className=o.join(" ")},t.prototype.manageState=function(t){var s=t,e=s.el,i=s.props,o=s.state,n=s.stickyStart,r=s.stickyStop,a=e.style,l=i.noStyles,c=i.positionVal,p=i.scrollEl,f=i.stickyClass,u=i.stuckClass,d=i.verticalPosition,y=function(t){t()},h=this.isWin&&(window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame)||y,k=this.toggleClasses,m=this.isWin||p.getBoundingClientRect().top?window.scrollY||window.pageYOffset:p.scrollTop,v=m<=n&&"sticky"===o,g=m>=r&&"sticky"===o;return m>n&&m<r&&("default"===o||"stuck"===o)?(s.state="sticky",h(function(){k(e,u,f),a.position=c,l||(a.bottom="",a[d]=i.stickyBitStickyOffset+"px")})):v?(s.state="default",h(function(){k(e,f),"fixed"===c&&(a.position="")})):g&&(s.state="stuck",h(function(){k(e,f,u),"fixed"!==c||l||(a.top="",a.bottom="0",a.position="absolute")})),s},t.prototype.removeInstance=function(t){var s=t.el,e=t.props,i=this.toggleClasses;s.style.position="",s.style[e.verticalPosition]="",i(s,e.stickyClass),i(s,e.stuckClass),i(s.parentNode,e.parentClass)},t.prototype.cleanup=function(){for(var t=0;t<this.instances.length;t+=1){var s=this.instances[t];s.props.scrollEl.removeEventListener("scroll",s.stateContainer),this.removeInstance(s)}this.manageState=!1,this.instances=[]},"undefined"!=typeof window){var s=window.$||window.jQuery||window.Zepto;s&&(s.fn.stickybits=function(s){new t(this,s)})}});

dist/stickybits.es.js

 /**
   stickybits - Stickybits is a lightweight alternative to `position: sticky` polyfills
-  @version v3.0.1
+  @version v3.0.3
   @link https://github.com/dollarshaveclub/stickybits#readme
@@ -8,2 +8,2 @@ @author Jeff Wainwright <[e-mail]> (https://jeffry.in)
 **/
-function Stickybits(t,s){var i=void 0!==s?s:{};this.version='"3.0.1"',this.userAgent=window.navigator.userAgent||"no `userAgent` provided by the browser",this.props={noStyles:i.noStyles||!1,stickyBitStickyOffset:i.stickyBitStickyOffset||0,parentClass:i.parentClass||"js-stickybit-parent",scrollEl:i.scrollEl||window,stickyClass:i.stickyClass||"js-is-sticky",stuckClass:i.stuckClass||"js-is-stuck",useStickyClasses:i.useStickyClasses||!1,verticalPosition:i.verticalPosition||"top"};var e=this.props;e.positionVal=this.definePosition()||"fixed";var o=e.verticalPosition,n=e.noStyles,r=e.positionVal;this.els="string"==typeof t?document.querySelectorAll(t):t,"length"in this.els||(this.els=[this.els]),this.instances=[];for(var a=0;a<this.els.length;a+=1){var l=this.els[a],c=l.style;if(c[o]="top"!==o||n?"":e.stickyBitStickyOffset+"px",c.position=r,"fixed"===r||e.useStickyClasses){var p=this.addInstance(l,e);this.instances.push(p)}}return this}function stickybits(t,s){return new Stickybits(t,s)}Stickybits.prototype.definePosition=function(){for(var t=["","-o-","-webkit-","-moz-","-ms-"],s=document.head.style,i=0;i<t.length;i+=1)s.position=t[i]+"sticky";var e=s.position?s.position:"fixed";return s.position="",e},Stickybits.prototype.addInstance=function(t,s){var i=this,e={el:t,parent:t.parentNode,props:s};this.isWin=this.props.scrollEl===window;var o=this.isWin?window:this.getClosestParent(e.el,e.props.scrollEl);return this.computeScrollOffsets(e),e.parent.className+=" "+s.parentClass,e.state="default",e.stateContainer=function(){return i.manageState(e)},o.addEventListener("scroll",e.stateContainer),e},Stickybits.prototype.getClosestParent=function(t,s){var i=document.querySelector(s),e=t;if(e.parentElement===i)return i;for(;e.parentElement!==i;)e=e.parentElement;return i},Stickybits.prototype.computeScrollOffsets=function(t){var s=t,i=s.props,e=s.parent,o=!this.isWin&&"fixed"===i.positionVal,n="bottom"!==i.verticalPosition,r=o?i.scrollEl.getBoundingClientRect().top:0,a=o?e.getBoundingClientRect().top-r:e.getBoundingClientRect().top;return s.offset=r+i.stickyBitStickyOffset,s.stickyStart=n?a-s.offset:0,s.stickyStop=n?a+e.offsetHeight-(s.el.offsetHeight+s.offset):a+e.offsetHeight,s},Stickybits.prototype.toggleClasses=function(t,s,i){var e=t,o=e.className.split(" ");i&&-1===o.indexOf(i)&&o.push(i);var n=o.indexOf(s);-1!==n&&o.splice(n,1),e.className=o.join(" ")},Stickybits.prototype.manageState=function(t){var s=t,i=s.el,e=s.props,o=s.state,n=s.stickyStart,r=s.stickyStop,a=i.style,l=e.noStyles,c=e.positionVal,p=e.scrollEl,f=e.stickyClass,u=e.stuckClass,y=e.verticalPosition,k=function(t){t()},d=this.isWin&&(window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame)||k,h=this.toggleClasses,S=this.isWin||document.querySelector(p).getBoundingClientRect().top?window.scrollY||window.pageYOffset:document.querySelector(p).scrollTop,m=S<=n&&"sticky"===o,v=S>=r&&"sticky"===o;return S>n&&S<r&&("default"===o||"stuck"===o)?(s.state="sticky",d(function(){h(i,u,f),a.position=c,l||(a.bottom="",a[y]=e.stickyBitStickyOffset+"px")})):m?(s.state="default",d(function(){h(i,f),"fixed"===c&&(a.position="")})):v&&(s.state="stuck",d(function(){h(i,f,u),"fixed"!==c||l||(a.top="",a.bottom="0",a.position="absolute")})),s},Stickybits.prototype.removeInstance=function(t){var s=t.el,i=t.props,e=this.toggleClasses;s.style.position="",s.style[i.verticalPosition]="",e(s,i.stickyClass),e(s,i.stuckClass),e(s.parentNode,i.parentClass)},Stickybits.prototype.cleanup=function(){for(var t=0;t<this.instances.length;t+=1){var s=this.instances[t];s.props.scrollEl.removeEventListener("scroll",s.stateContainer),this.removeInstance(s)}this.manageState=!1,this.instances=[]};export default stickybits;
+function Stickybits(t){var s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.version='"3.0.3"',this.userAgent=window.navigator.userAgent||"no `userAgent` provided by the browser",this.props={noStyles:s.noStyles||!1,stickyBitStickyOffset:s.stickyBitStickyOffset||0,parentClass:s.parentClass||"js-stickybit-parent",scrollEl:document.querySelector(s.scrollEl)||window,stickyClass:s.stickyClass||"js-is-sticky",stuckClass:s.stuckClass||"js-is-stuck",useStickyClasses:s.useStickyClasses||!1,verticalPosition:s.verticalPosition||"top"};var i=this.props;i.positionVal=this.definePosition()||"fixed";var e=i.verticalPosition,o=i.noStyles,n=i.positionVal;this.els="string"==typeof t?document.querySelectorAll(t):t,"length"in this.els||(this.els=[this.els]),this.instances=[];for(var r=0;r<this.els.length;r+=1){var a=this.els[r],l=a.style;if(l[e]="top"!==e||o?"":i.stickyBitStickyOffset+"px",l.position="fixed"!==n?n:"","fixed"===n||i.useStickyClasses){var c=this.addInstance(a,i);this.instances.push(c)}}return this}function stickybits(t,s){return new Stickybits(t,s)}Stickybits.prototype.definePosition=function(){for(var t=["","-o-","-webkit-","-moz-","-ms-"],s=document.head.style,i=0;i<t.length;i+=1)s.position=t[i]+"sticky";var e=s.position?s.position:"fixed";return s.position="",e},Stickybits.prototype.addInstance=function(t,s){var i=this,e={el:t,parent:t.parentNode,props:s};this.isWin=this.props.scrollEl===window;var o=this.isWin?window:this.getClosestParent(e.el,e.props.scrollEl);return this.computeScrollOffsets(e),e.parent.className+=" "+s.parentClass,e.state="default",e.stateContainer=function(){return i.manageState(e)},o.addEventListener("scroll",e.stateContainer),e},Stickybits.prototype.getClosestParent=function(t,s){var i=document.querySelector(s),e=t;if(e.parentElement===i)return i;for(;e.parentElement!==i;)e=e.parentElement;return i},Stickybits.prototype.computeScrollOffsets=function(t){var s=t,i=s.props,e=s.parent,o=!this.isWin&&"fixed"===i.positionVal,n="bottom"!==i.verticalPosition,r=o?i.scrollEl.getBoundingClientRect().top:0,a=o?e.getBoundingClientRect().top-r:e.getBoundingClientRect().top;return s.offset=r+i.stickyBitStickyOffset,s.stickyStart=n?a-s.offset:0,s.stickyStop=n?a+e.offsetHeight-(s.el.offsetHeight+s.offset):a+e.offsetHeight,s},Stickybits.prototype.toggleClasses=function(t,s,i){var e=t,o=e.className.split(" ");i&&-1===o.indexOf(i)&&o.push(i);var n=o.indexOf(s);-1!==n&&o.splice(n,1),e.className=o.join(" ")},Stickybits.prototype.manageState=function(t){var s=t,i=s.el,e=s.props,o=s.state,n=s.stickyStart,r=s.stickyStop,a=i.style,l=e.noStyles,c=e.positionVal,p=e.scrollEl,f=e.stickyClass,u=e.stuckClass,y=e.verticalPosition,k=function(t){t()},d=this.isWin&&(window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame)||k,h=this.toggleClasses,S=this.isWin||p.getBoundingClientRect().top?window.scrollY||window.pageYOffset:p.scrollTop,g=S<=n&&"sticky"===o,m=S>=r&&"sticky"===o;return S>n&&S<r&&("default"===o||"stuck"===o)?(s.state="sticky",d(function(){h(i,u,f),a.position=c,l||(a.bottom="",a[y]=e.stickyBitStickyOffset+"px")})):g?(s.state="default",d(function(){h(i,f),"fixed"===c&&(a.position="")})):m&&(s.state="stuck",d(function(){h(i,f,u),"fixed"!==c||l||(a.top="",a.bottom="0",a.position="absolute")})),s},Stickybits.prototype.removeInstance=function(t){var s=t.el,i=t.props,e=this.toggleClasses;s.style.position="",s.style[i.verticalPosition]="",e(s,i.stickyClass),e(s,i.stuckClass),e(s.parentNode,i.parentClass)},Stickybits.prototype.cleanup=function(){for(var t=0;t<this.instances.length;t+=1){var s=this.instances[t];s.props.scrollEl.removeEventListener("scroll",s.stateContainer),this.removeInstance(s)}this.manageState=!1,this.instances=[]};export default stickybits;

dist/stickybits.js

@@ -0,1 +1,8 @@
+/**
+  stickybits - Stickybits is a lightweight alternative to `position: sticky` polyfills
+  @version v3.0.3
+  @link https://github.com/dollarshaveclub/stickybits#readme
+  @author Jeff Wainwright <[e-mail]> (https://jeffry.in)
+  @license MIT
+**/
 (function (global, factory) {
@@ -59,5 +66,6 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 */
-function Stickybits(target, obj) {
-  var o = typeof obj !== 'undefined' ? obj : {};
-  this.version = '2.1.2';
+function Stickybits(target) {
+  var o = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  this.version = '"3.0.3"';
   this.userAgent = window.navigator.userAgent || 'no `userAgent` provided by the browser';
@@ -68,3 +76,3 @@ this.props = {
     parentClass: o.parentClass || 'js-stickybit-parent',
-    scrollEl: o.scrollEl || window,
+    scrollEl: document.querySelector(o.scrollEl) || window,
     stickyClass: o.stickyClass || 'js-is-sticky',
@@ -92,8 +100,6 @@ stuckClass: o.stuckClass || 'js-is-stuck',
     var styles = el.style;
-    if (vp === 'top' && !ns) styles[vp] = p.stickyBitStickyOffset + 'px';
-    if (pv !== 'fixed' && p.useStickyClasses === false) {
-      styles.position = pv;
-    } else {
-      // const stickyManager = new ManageSticky(el, p)
-      if (pv !== 'fixed') styles.position = pv;
+    // set vertical position
+    styles[vp] = vp === 'top' && !ns ? p.stickyBitStickyOffset + 'px' : '';
+    styles.position = pv !== 'fixed' ? pv : '';
+    if (pv === 'fixed' || p.useStickyClasses) {
       var instance = this.addInstance(el, p);
@@ -121,4 +127,3 @@ // instances are an array of objects
   }
-  var stickyProp = 'fixed';
-  if (typeof test.position !== 'undefined') stickyProp = test.position;
+  var stickyProp = test.position ? test.position : 'fixed';
   test.position = '';
@@ -160,11 +165,9 @@ return stickyProp;
   };
-  var p = item.props;
+  this.isWin = this.props.scrollEl === window;
+  var se = this.isWin ? window : this.getClosestParent(item.el, item.props.scrollEl);
+  this.computeScrollOffsets(item);
   item.parent.className += ' ' + props.parentClass;
-  var se = p.scrollEl;
-  item.isWin = se === window;
-  if (!item.isWin) se = this.getClosestParent(item.el, se);
-  this.computeScrollOffsets(item);
   item.state = 'default';
   item.stateContainer = function () {
-    _this.manageState(item);
+    return _this.manageState(item);
   };
@@ -183,3 +186,3 @@ se.addEventListener('scroll', item.stateContainer);
 */
-Stickybits.prototype.getClosestParent = function getClosestParent(el, matchSelector) {
+Stickybits.prototype.getClosestParent = function (el, matchSelector) {
   // p = parent element
@@ -209,17 +212,9 @@ var p = document.querySelector(matchSelector);
   var parent = it.parent;
-  var iw = it.isWin;
-  var scrollElOffset = 0;
-  var stickyStart = parent.getBoundingClientRect().top;
-  if (!iw && p.positionVal === 'fixed') {
-    scrollElOffset = p.scrollEl.getBoundingClientRect().top;
-    stickyStart = parent.getBoundingClientRect().top - scrollElOffset;
-  }
+  var isCustom = !this.isWin && p.positionVal === 'fixed';
+  var isBottom = p.verticalPosition !== 'bottom';
+  var scrollElOffset = isCustom ? p.scrollEl.getBoundingClientRect().top : 0;
+  var stickyStart = isCustom ? parent.getBoundingClientRect().top - scrollElOffset : parent.getBoundingClientRect().top;
   it.offset = scrollElOffset + p.stickyBitStickyOffset;
-  if (p.verticalPosition !== 'bottom') {
-    it.stickyStart = stickyStart - it.offset;
-    it.stickyStop = stickyStart + parent.offsetHeight - (it.el.offsetHeight + it.offset);
-  } else {
-    it.stickyStart = 0;
-    it.stickyStop = stickyStart + parent.offsetHeight;
-  }
+  it.stickyStart = isBottom ? stickyStart - it.offset : 0;
+  it.stickyStop = isBottom ? stickyStart + parent.offsetHeight - (it.el.offsetHeight + it.offset) : stickyStart + parent.offsetHeight;
   return it;
@@ -235,3 +230,3 @@ };
 */
-Stickybits.prototype.toggleClasses = function toggleClasses(el, r, a) {
+Stickybits.prototype.toggleClasses = function (el, r, a) {
   var e = el;
@@ -275,8 +270,7 @@ var cArray = e.className.split(' ');
   */
-  var rAF = se.requestAnimationFrame;
-  if (!it.isWin || typeof rAF === 'undefined') {
-    rAF = function rAFDummy(f) {
-      f();
-    };
-  }
+  var rAFStub = function rAFDummy(f) {
+    f();
+  };
+  var rAF = !this.isWin ? rAFStub : window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || rAFStub;
+
   /*
@@ -291,3 +285,3 @@ define scroll vars
   var tC = this.toggleClasses;
-  var scroll = it.isWin ? se.scrollY || se.pageYOffset : se.scrollTop;
+  var scroll = this.isWin || se.getBoundingClientRect().top ? window.scrollY || window.pageYOffset : se.scrollTop;
   var notSticky = scroll > start && scroll < stop && (state === 'default' || state === 'stuck');
@@ -294,0 +288,0 @@ var isSticky = scroll <= start && state === 'sticky';

dist/stickybits.min.js

 /**
   stickybits - Stickybits is a lightweight alternative to `position: sticky` polyfills
-  @version v3.0.1
+  @version v3.0.3
   @link https://github.com/dollarshaveclub/stickybits#readme
@@ -8,2 +8,2 @@ @author Jeff Wainwright <[e-mail]> (https://jeffry.in)
 **/
-!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){var e=void 0!==s?s:{};this.version='"3.0.1"',this.userAgent=window.navigator.userAgent||"no `userAgent` provided by the browser",this.props={noStyles:e.noStyles||!1,stickyBitStickyOffset:e.stickyBitStickyOffset||0,parentClass:e.parentClass||"js-stickybit-parent",scrollEl:e.scrollEl||window,stickyClass:e.stickyClass||"js-is-sticky",stuckClass:e.stuckClass||"js-is-stuck",useStickyClasses:e.useStickyClasses||!1,verticalPosition:e.verticalPosition||"top"};var i=this.props;i.positionVal=this.definePosition()||"fixed";var o=i.verticalPosition,n=i.noStyles,r=i.positionVal;this.els="string"==typeof t?document.querySelectorAll(t):t,"length"in this.els||(this.els=[this.els]),this.instances=[];for(var a=0;a<this.els.length;a+=1){var l=this.els[a],c=l.style;if(c[o]="top"!==o||n?"":i.stickyBitStickyOffset+"px",c.position=r,"fixed"===r||i.useStickyClasses){var p=this.addInstance(l,i);this.instances.push(p)}}return this}return t.prototype.definePosition=function(){for(var t=["","-o-","-webkit-","-moz-","-ms-"],s=document.head.style,e=0;e<t.length;e+=1)s.position=t[e]+"sticky";var i=s.position?s.position:"fixed";return s.position="",i},t.prototype.addInstance=function(t,s){var e=this,i={el:t,parent:t.parentNode,props:s};this.isWin=this.props.scrollEl===window;var o=this.isWin?window:this.getClosestParent(i.el,i.props.scrollEl);return this.computeScrollOffsets(i),i.parent.className+=" "+s.parentClass,i.state="default",i.stateContainer=function(){return e.manageState(i)},o.addEventListener("scroll",i.stateContainer),i},t.prototype.getClosestParent=function(t,s){var e=document.querySelector(s),i=t;if(i.parentElement===e)return e;for(;i.parentElement!==e;)i=i.parentElement;return e},t.prototype.computeScrollOffsets=function(t){var s=t,e=s.props,i=s.parent,o=!this.isWin&&"fixed"===e.positionVal,n="bottom"!==e.verticalPosition,r=o?e.scrollEl.getBoundingClientRect().top:0,a=o?i.getBoundingClientRect().top-r:i.getBoundingClientRect().top;return s.offset=r+e.stickyBitStickyOffset,s.stickyStart=n?a-s.offset:0,s.stickyStop=n?a+i.offsetHeight-(s.el.offsetHeight+s.offset):a+i.offsetHeight,s},t.prototype.toggleClasses=function(t,s,e){var i=t,o=i.className.split(" ");e&&-1===o.indexOf(e)&&o.push(e);var n=o.indexOf(s);-1!==n&&o.splice(n,1),i.className=o.join(" ")},t.prototype.manageState=function(t){var s=t,e=s.el,i=s.props,o=s.state,n=s.stickyStart,r=s.stickyStop,a=e.style,l=i.noStyles,c=i.positionVal,p=i.scrollEl,f=i.stickyClass,u=i.stuckClass,y=i.verticalPosition,d=function(t){t()},h=this.isWin&&(window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame)||d,k=this.toggleClasses,m=this.isWin||document.querySelector(p).getBoundingClientRect().top?window.scrollY||window.pageYOffset:document.querySelector(p).scrollTop,v=m<=n&&"sticky"===o,g=m>=r&&"sticky"===o;return m>n&&m<r&&("default"===o||"stuck"===o)?(s.state="sticky",h(function(){k(e,u,f),a.position=c,l||(a.bottom="",a[y]=i.stickyBitStickyOffset+"px")})):v?(s.state="default",h(function(){k(e,f),"fixed"===c&&(a.position="")})):g&&(s.state="stuck",h(function(){k(e,f,u),"fixed"!==c||l||(a.top="",a.bottom="0",a.position="absolute")})),s},t.prototype.removeInstance=function(t){var s=t.el,e=t.props,i=this.toggleClasses;s.style.position="",s.style[e.verticalPosition]="",i(s,e.stickyClass),i(s,e.stuckClass),i(s.parentNode,e.parentClass)},t.prototype.cleanup=function(){for(var t=0;t<this.instances.length;t+=1){var s=this.instances[t];s.props.scrollEl.removeEventListener("scroll",s.stateContainer),this.removeInstance(s)}this.manageState=!1,this.instances=[]},function(s,e){return new t(s,e)}});
+!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){var s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.version='"3.0.3"',this.userAgent=window.navigator.userAgent||"no `userAgent` provided by the browser",this.props={noStyles:s.noStyles||!1,stickyBitStickyOffset:s.stickyBitStickyOffset||0,parentClass:s.parentClass||"js-stickybit-parent",scrollEl:document.querySelector(s.scrollEl)||window,stickyClass:s.stickyClass||"js-is-sticky",stuckClass:s.stuckClass||"js-is-stuck",useStickyClasses:s.useStickyClasses||!1,verticalPosition:s.verticalPosition||"top"};var e=this.props;e.positionVal=this.definePosition()||"fixed";var i=e.verticalPosition,o=e.noStyles,n=e.positionVal;this.els="string"==typeof t?document.querySelectorAll(t):t,"length"in this.els||(this.els=[this.els]),this.instances=[];for(var r=0;r<this.els.length;r+=1){var a=this.els[r],l=a.style;if(l[i]="top"!==i||o?"":e.stickyBitStickyOffset+"px",l.position="fixed"!==n?n:"","fixed"===n||e.useStickyClasses){var c=this.addInstance(a,e);this.instances.push(c)}}return this}return t.prototype.definePosition=function(){for(var t=["","-o-","-webkit-","-moz-","-ms-"],s=document.head.style,e=0;e<t.length;e+=1)s.position=t[e]+"sticky";var i=s.position?s.position:"fixed";return s.position="",i},t.prototype.addInstance=function(t,s){var e=this,i={el:t,parent:t.parentNode,props:s};this.isWin=this.props.scrollEl===window;var o=this.isWin?window:this.getClosestParent(i.el,i.props.scrollEl);return this.computeScrollOffsets(i),i.parent.className+=" "+s.parentClass,i.state="default",i.stateContainer=function(){return e.manageState(i)},o.addEventListener("scroll",i.stateContainer),i},t.prototype.getClosestParent=function(t,s){var e=document.querySelector(s),i=t;if(i.parentElement===e)return e;for(;i.parentElement!==e;)i=i.parentElement;return e},t.prototype.computeScrollOffsets=function(t){var s=t,e=s.props,i=s.parent,o=!this.isWin&&"fixed"===e.positionVal,n="bottom"!==e.verticalPosition,r=o?e.scrollEl.getBoundingClientRect().top:0,a=o?i.getBoundingClientRect().top-r:i.getBoundingClientRect().top;return s.offset=r+e.stickyBitStickyOffset,s.stickyStart=n?a-s.offset:0,s.stickyStop=n?a+i.offsetHeight-(s.el.offsetHeight+s.offset):a+i.offsetHeight,s},t.prototype.toggleClasses=function(t,s,e){var i=t,o=i.className.split(" ");e&&-1===o.indexOf(e)&&o.push(e);var n=o.indexOf(s);-1!==n&&o.splice(n,1),i.className=o.join(" ")},t.prototype.manageState=function(t){var s=t,e=s.el,i=s.props,o=s.state,n=s.stickyStart,r=s.stickyStop,a=e.style,l=i.noStyles,c=i.positionVal,p=i.scrollEl,f=i.stickyClass,u=i.stuckClass,y=i.verticalPosition,d=function(t){t()},h=this.isWin&&(window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame)||d,k=this.toggleClasses,m=this.isWin||p.getBoundingClientRect().top?window.scrollY||window.pageYOffset:p.scrollTop,g=m<=n&&"sticky"===o,v=m>=r&&"sticky"===o;return m>n&&m<r&&("default"===o||"stuck"===o)?(s.state="sticky",h(function(){k(e,u,f),a.position=c,l||(a.bottom="",a[y]=i.stickyBitStickyOffset+"px")})):g?(s.state="default",h(function(){k(e,f),"fixed"===c&&(a.position="")})):v&&(s.state="stuck",h(function(){k(e,f,u),"fixed"!==c||l||(a.top="",a.bottom="0",a.position="absolute")})),s},t.prototype.removeInstance=function(t){var s=t.el,e=t.props,i=this.toggleClasses;s.style.position="",s.style[e.verticalPosition]="",i(s,e.stickyClass),i(s,e.stuckClass),i(s.parentNode,e.parentClass)},t.prototype.cleanup=function(){for(var t=0;t<this.instances.length;t+=1){var s=this.instances[t];s.props.scrollEl.removeEventListener("scroll",s.stateContainer),this.removeInstance(s)}this.manageState=!1,this.instances=[]},function(s,e){return new t(s,e)}});

dist/umbrella.stickybits.js

 /**
   stickybits - Stickybits is a lightweight alternative to `position: sticky` polyfills
-  @version v3.0.1
+  @version v3.0.3
   @link https://github.com/dollarshaveclub/stickybits#readme
@@ -8,2 +8,2 @@ @author Jeff Wainwright <[e-mail]> (https://jeffry.in)
 **/
-!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?s():"function"==typeof define&&define.amd?define(s):s()}(0,function(){"use strict";function t(t,s){var e=void 0!==s?s:{};this.version='"3.0.1"',this.userAgent=window.navigator.userAgent||"no `userAgent` provided by the browser",this.props={noStyles:e.noStyles||!1,stickyBitStickyOffset:e.stickyBitStickyOffset||0,parentClass:e.parentClass||"js-stickybit-parent",scrollEl:e.scrollEl||window,stickyClass:e.stickyClass||"js-is-sticky",stuckClass:e.stuckClass||"js-is-stuck",useStickyClasses:e.useStickyClasses||!1,verticalPosition:e.verticalPosition||"top"};var i=this.props;i.positionVal=this.definePosition()||"fixed";var o=i.verticalPosition,n=i.noStyles,r=i.positionVal;this.els="string"==typeof t?document.querySelectorAll(t):t,"length"in this.els||(this.els=[this.els]),this.instances=[];for(var a=0;a<this.els.length;a+=1){var l=this.els[a],c=l.style;if(c[o]="top"!==o||n?"":i.stickyBitStickyOffset+"px",c.position=r,"fixed"===r||i.useStickyClasses){var p=this.addInstance(l,i);this.instances.push(p)}}return this}if(t.prototype.definePosition=function(){for(var t=["","-o-","-webkit-","-moz-","-ms-"],s=document.head.style,e=0;e<t.length;e+=1)s.position=t[e]+"sticky";var i=s.position?s.position:"fixed";return s.position="",i},t.prototype.addInstance=function(t,s){var e=this,i={el:t,parent:t.parentNode,props:s};this.isWin=this.props.scrollEl===window;var o=this.isWin?window:this.getClosestParent(i.el,i.props.scrollEl);return this.computeScrollOffsets(i),i.parent.className+=" "+s.parentClass,i.state="default",i.stateContainer=function(){return e.manageState(i)},o.addEventListener("scroll",i.stateContainer),i},t.prototype.getClosestParent=function(t,s){var e=document.querySelector(s),i=t;if(i.parentElement===e)return e;for(;i.parentElement!==e;)i=i.parentElement;return e},t.prototype.computeScrollOffsets=function(t){var s=t,e=s.props,i=s.parent,o=!this.isWin&&"fixed"===e.positionVal,n="bottom"!==e.verticalPosition,r=o?e.scrollEl.getBoundingClientRect().top:0,a=o?i.getBoundingClientRect().top-r:i.getBoundingClientRect().top;return s.offset=r+e.stickyBitStickyOffset,s.stickyStart=n?a-s.offset:0,s.stickyStop=n?a+i.offsetHeight-(s.el.offsetHeight+s.offset):a+i.offsetHeight,s},t.prototype.toggleClasses=function(t,s,e){var i=t,o=i.className.split(" ");e&&-1===o.indexOf(e)&&o.push(e);var n=o.indexOf(s);-1!==n&&o.splice(n,1),i.className=o.join(" ")},t.prototype.manageState=function(t){var s=t,e=s.el,i=s.props,o=s.state,n=s.stickyStart,r=s.stickyStop,a=e.style,l=i.noStyles,c=i.positionVal,p=i.scrollEl,f=i.stickyClass,u=i.stuckClass,y=i.verticalPosition,d=function(t){t()},h=this.isWin&&(window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame)||d,k=this.toggleClasses,m=this.isWin||document.querySelector(p).getBoundingClientRect().top?window.scrollY||window.pageYOffset:document.querySelector(p).scrollTop,v=m<=n&&"sticky"===o,g=m>=r&&"sticky"===o;return m>n&&m<r&&("default"===o||"stuck"===o)?(s.state="sticky",h(function(){k(e,u,f),a.position=c,l||(a.bottom="",a[y]=i.stickyBitStickyOffset+"px")})):v?(s.state="default",h(function(){k(e,f),"fixed"===c&&(a.position="")})):g&&(s.state="stuck",h(function(){k(e,f,u),"fixed"!==c||l||(a.top="",a.bottom="0",a.position="absolute")})),s},t.prototype.removeInstance=function(t){var s=t.el,e=t.props,i=this.toggleClasses;s.style.position="",s.style[e.verticalPosition]="",i(s,e.stickyClass),i(s,e.stuckClass),i(s.parentNode,e.parentClass)},t.prototype.cleanup=function(){for(var t=0;t<this.instances.length;t+=1){var s=this.instances[t];s.props.scrollEl.removeEventListener("scroll",s.stateContainer),this.removeInstance(s)}this.manageState=!1,this.instances=[]},"undefined"!=typeof window){var s=window.u;s&&(s.prototype.stickybits=function(s){new t(this,s)})}});
+!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?s():"function"==typeof define&&define.amd?define(s):s()}(0,function(){"use strict";function t(t){var s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.version='"3.0.3"',this.userAgent=window.navigator.userAgent||"no `userAgent` provided by the browser",this.props={noStyles:s.noStyles||!1,stickyBitStickyOffset:s.stickyBitStickyOffset||0,parentClass:s.parentClass||"js-stickybit-parent",scrollEl:document.querySelector(s.scrollEl)||window,stickyClass:s.stickyClass||"js-is-sticky",stuckClass:s.stuckClass||"js-is-stuck",useStickyClasses:s.useStickyClasses||!1,verticalPosition:s.verticalPosition||"top"};var e=this.props;e.positionVal=this.definePosition()||"fixed";var i=e.verticalPosition,o=e.noStyles,n=e.positionVal;this.els="string"==typeof t?document.querySelectorAll(t):t,"length"in this.els||(this.els=[this.els]),this.instances=[];for(var r=0;r<this.els.length;r+=1){var a=this.els[r],l=a.style;if(l[i]="top"!==i||o?"":e.stickyBitStickyOffset+"px",l.position="fixed"!==n?n:"","fixed"===n||e.useStickyClasses){var c=this.addInstance(a,e);this.instances.push(c)}}return this}if(t.prototype.definePosition=function(){for(var t=["","-o-","-webkit-","-moz-","-ms-"],s=document.head.style,e=0;e<t.length;e+=1)s.position=t[e]+"sticky";var i=s.position?s.position:"fixed";return s.position="",i},t.prototype.addInstance=function(t,s){var e=this,i={el:t,parent:t.parentNode,props:s};this.isWin=this.props.scrollEl===window;var o=this.isWin?window:this.getClosestParent(i.el,i.props.scrollEl);return this.computeScrollOffsets(i),i.parent.className+=" "+s.parentClass,i.state="default",i.stateContainer=function(){return e.manageState(i)},o.addEventListener("scroll",i.stateContainer),i},t.prototype.getClosestParent=function(t,s){var e=document.querySelector(s),i=t;if(i.parentElement===e)return e;for(;i.parentElement!==e;)i=i.parentElement;return e},t.prototype.computeScrollOffsets=function(t){var s=t,e=s.props,i=s.parent,o=!this.isWin&&"fixed"===e.positionVal,n="bottom"!==e.verticalPosition,r=o?e.scrollEl.getBoundingClientRect().top:0,a=o?i.getBoundingClientRect().top-r:i.getBoundingClientRect().top;return s.offset=r+e.stickyBitStickyOffset,s.stickyStart=n?a-s.offset:0,s.stickyStop=n?a+i.offsetHeight-(s.el.offsetHeight+s.offset):a+i.offsetHeight,s},t.prototype.toggleClasses=function(t,s,e){var i=t,o=i.className.split(" ");e&&-1===o.indexOf(e)&&o.push(e);var n=o.indexOf(s);-1!==n&&o.splice(n,1),i.className=o.join(" ")},t.prototype.manageState=function(t){var s=t,e=s.el,i=s.props,o=s.state,n=s.stickyStart,r=s.stickyStop,a=e.style,l=i.noStyles,c=i.positionVal,p=i.scrollEl,f=i.stickyClass,u=i.stuckClass,d=i.verticalPosition,y=function(t){t()},h=this.isWin&&(window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame)||y,k=this.toggleClasses,m=this.isWin||p.getBoundingClientRect().top?window.scrollY||window.pageYOffset:p.scrollTop,v=m<=n&&"sticky"===o,g=m>=r&&"sticky"===o;return m>n&&m<r&&("default"===o||"stuck"===o)?(s.state="sticky",h(function(){k(e,u,f),a.position=c,l||(a.bottom="",a[d]=i.stickyBitStickyOffset+"px")})):v?(s.state="default",h(function(){k(e,f),"fixed"===c&&(a.position="")})):g&&(s.state="stuck",h(function(){k(e,f,u),"fixed"!==c||l||(a.top="",a.bottom="0",a.position="absolute")})),s},t.prototype.removeInstance=function(t){var s=t.el,e=t.props,i=this.toggleClasses;s.style.position="",s.style[e.verticalPosition]="",i(s,e.stickyClass),i(s,e.stuckClass),i(s.parentNode,e.parentClass)},t.prototype.cleanup=function(){for(var t=0;t<this.instances.length;t+=1){var s=this.instances[t];s.props.scrollEl.removeEventListener("scroll",s.stateContainer),this.removeInstance(s)}this.manageState=!1,this.instances=[]},"undefined"!=typeof window){var s=window.u;s&&(s.prototype.stickybits=function(s){new t(this,s)})}});

package.json

 {
   "name": "stickybits",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "Stickybits is a lightweight alternative to `position: sticky` polyfills",
@@ -8,5 +8,7 @@ "main": "dist/stickybits.js",
   "scripts": {
-    "build": "npm run test:unit && npm run build:es && npm run build:jquery && npm run build:standard && npm run build:umbrella",
+    "build": "npm run test:unit && npm run build:es && npm run build:jquery-dev && npm run build:jquery && npm run build:standard-dev && npm run build:standard && npm run build:umbrella",
     "build:es": "rollup --config configs/rollup.config.es.js",
+    "build:jquery-dev": "rollup --config configs/rollup.config.jquery-dev.js",
     "build:jquery": "rollup --config configs/rollup.config.jquery.js",
+    "build:standard-dev": "rollup --config configs/rollup.config.standard-dev.js",
     "build:standard": "rollup --config configs/rollup.config.standard.js",
@@ -52,3 +54,3 @@ "build:umbrella": "rollup --config configs/rollup.config.umbrella.js",
     "babel-core": "^6.18.0",
-    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-env": "^1.6.1",
     "codecov": "^3.0.0",
@@ -60,3 +62,3 @@ "debug": "^3.0.0",
     "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-node": "^5.2.1",
+    "eslint-plugin-node": "^6.0.0",
     "eslint-plugin-promise": "^3.6.0",
@@ -70,3 +72,3 @@ "eslint-plugin-standard": "^3.0.1",
     "qunit": "^2.4.1",
-    "rollup": "0.55.1",
+    "rollup": "0.55.4",
     "rollup-plugin-babel": "^3.0.0",
@@ -92,3 +94,7 @@ "rollup-plugin-replace": "^2.0.0",
     "fixedheader"
+  ],
+  "browserslist": [
+    "defaults",
+    "ie >= 9"
   ]
 }

README.md

@@ -7,3 +7,3 @@ <p align="center">
 <p align="center">
-  <a href="https://travis-ci.org/dollarshaveclub/stickbits/">
+  <a href="https://travis-ci.org/dollarshaveclub/stickybits/">
     <img alt="Build Status" src="https://travis-ci.org/dollarshaveclub/stickybits.svg?branch=master" />
@@ -27,13 +27,11 @@ </a>
 
-> Stickybits is a lightweight 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.
 
-**NOTE:** As of **StickyBits 3.0.0**, unminified versions are not built—hence the big 3.0.0. Everything else should work as expected. Provide a pull request with new build requirements. 
-
 **Stickybits is awesome because:**
 -  it can add a CSS Sticky Class (`.js-is-sticky`) when [position: sticky](http://caniuse.com/#search=sticky) elements become active and a CSS Stuck Class (`.js-is-stuck`) when they become stuck. See [useStickyClasses](#feature).
--  it loosely mimics [position: sticky](http://caniuse.com/#search=sticky) to consistently stick elements vertically across multiple platforms 
+-  it loosely mimics [position: sticky](http://caniuse.com/#search=sticky) to consistently stick elements vertically across multiple platforms
 -  it does not have the _jumpiness_ that plugins that are built around `position: fixed` have because it tries to support `position: sticky` first.
 -  in its simplest use case, a `scroll` event listener will not be used if `position: sticky` is supported.
 -  it is super simple & lightweight
--  it provides a [wiki](https://github.com/dollarshaveclub/stickybits/wiki) that digs deeply into fundementals of `position: sticky` and `position: fixed` and it works with them. 
+-  it provides a [wiki](https://github.com/dollarshaveclub/stickybits/wiki) that digs deeply into fundementals of `position: sticky` and `position: fixed` and it works with them.
 
@@ -59,3 +57,3 @@ <hr />
 ```sh
-yarn add stickybits 
+yarn add stickybits
 ```
@@ -117,3 +115,3 @@ npm
 
-Stickybits loosely works for `bottom` positioning as well. 
+Stickybits loosely works for `bottom` positioning as well.
 
@@ -152,3 +150,3 @@ To have a StickyBits element stick to the `bottom`:
 ```javascript
-const stickybitsInstancetoBeCleanedup = stickbits('selector');
+const stickybitsInstancetoBeCleanedup = stickybits('selector');
 stickybitsInstancetoBeCleanedup.cleanup();
@@ -162,3 +160,3 @@ ```
 ```javascript
-stickbits('selector', {noStyles: true});
+stickybits('selector', {noStyles: true});
 ```
@@ -173,3 +171,3 @@
 ```javascript
-stickbits('selector', {parentClass: 'new-parent-classname'});
+stickybits('selector', {parentClass: 'new-parent-classname'});
 ```
@@ -180,3 +178,3 @@
 ```javascript
-stickbits('selector', {stickyClass: 'new-sticky-classname'});
+stickybits('selector', {stickyClass: 'new-sticky-classname'});
 ```
@@ -187,3 +185,3 @@
 ```javascript
-stickbits('selector', {stuckClass: 'new-stuck-classname'});
+stickybits('selector', {stuckClass: 'new-stuck-classname'});
 ```
@@ -194,3 +192,3 @@
 ```javascript
-stickbits('selector', {
+stickybits('selector', {
   parentClass: 'new-parent-classname',
@@ -241,7 +239,7 @@ stickyClass: 'new-sticky-classname',
 
-Stickybits is a no dependency JavaScript plugin. It provides the smallest API possible in both features and kb size to deliver working sticky elements. This means that opinionated featuring is left out as much as possible and that it works with minimal effort in Frameworks. 
+Stickybits is a no dependency JavaScript plugin. It provides the smallest API possible in both features and kb size to deliver working sticky elements. This means that opinionated featuring is left out as much as possible and that it works with minimal effort in Frameworks.
 
 ### CSS when `position: sticky` is not supported
 
-**Sticky Start and Sticky Stop:** Because Stickybits is minimal, when `position: sticky` is not supported Stickybits will use `position: fixed` which is relative to the browser window. If the StickyBits parent element has a height recognized by the browser, Stickybits will take care of the sticky top and sticky bottom invocation. If the parent's height is not recognized by the browser there will be issues. 
+**Sticky Start and Sticky Stop:** Because Stickybits is minimal, when `position: sticky` is not supported Stickybits will use `position: fixed` which is relative to the browser window. If the StickyBits parent element has a height recognized by the browser, Stickybits will take care of the sticky top and sticky bottom invocation. If the parent's height is not recognized by the browser there will be issues.
 
@@ -252,3 +250,3 @@ **Left and Right Positioning:** With `position: fixed` the Stickybit element will work relative to the browser window by default. To work with this issue, there are several options. Some are noted [here](https://github.com/dollarshaveclub/stickybits/issues/66). More solutions to come!
 
-Basic 
+Basic
 
@@ -293,3 +291,3 @@ ```javascript
 
-For more debugging and managing Stickbits, view the [wiki](https://github.com/dollarshaveclub/stickybits/wiki).
+For more debugging and managing Stickybits, view the [wiki](https://github.com/dollarshaveclub/stickybits/wiki).
 
@@ -312,15 +310,15 @@ ---
 
-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. 
+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.
 
 ## Contributing
 
-Please contribute to Stickybits by filing an [issue](https://github.com/dollarshaveclub/stickybits/issues), responding to [issues](https://github.com/dollarshaveclub/stickybits/issues), adding to the [wiki](https://github.com/dollarshaveclub/stickybits/wiki), or reaching out socially—etc. 
+Please contribute to Stickybits by filing an [issue](https://github.com/dollarshaveclub/stickybits/issues), responding to [issues](https://github.com/dollarshaveclub/stickybits/issues), adding to the [wiki](https://github.com/dollarshaveclub/stickybits/wiki), or reaching out socially—etc.
 
-Stickybits is a utility. It may often not be needed! With shared understanding of `position: sticky` and `position: fixed` along with product awareness, Stickybits can improve as can a shared understanding of the "sticky element issue". Is this paragraph over-reaching? Yes! Help improve it. 
+Stickybits is a utility. It may often not be needed! With shared understanding of `position: sticky` and `position: fixed` along with product awareness, Stickybits can improve as can a shared understanding of the "sticky element issue". Is this paragraph over-reaching? Yes! Help improve it.
 
 ## 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`. 
+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`.
 
-Architecture discussions and Pull Request help has been provided by [Jacob Kelley](https://github.com/jakiestfu), [Brian Gonzalez](https://github.com/briangonzalez/), and [Matt Young](https://github.com/someguynamedmatt). It is much appreciated! 
+Architecture discussions and Pull Request help has been provided by [Jacob Kelley](https://github.com/jakiestfu), [Brian Gonzalez](https://github.com/briangonzalez/), and [Matt Young](https://github.com/someguynamedmatt). It is much appreciated!
 
@@ -331,3 +329,3 @@ ----
 
-### More great contributors 
+### More great contributors
 
@@ -337,2 +335,1 @@ - [Daniel Ruf](https://github.com/DanielRuf)
 - [K. Vanberendonck](https://github.com/donkeybonks)
-

src/stickybits.js

@@ -61,3 +61,3 @@ /*
     parentClass: o.parentClass || 'js-stickybit-parent',
-    scrollEl: o.scrollEl || window,
+    scrollEl: document.querySelector(o.scrollEl) || window,
     stickyClass: o.stickyClass || 'js-is-sticky',
@@ -87,3 +87,3 @@ stuckClass: o.stuckClass || 'js-is-stuck',
     styles[vp] = vp === 'top' && !ns ? `${p.stickyBitStickyOffset}px` : ''
-    styles.position = pv
+    styles.position = pv !== 'fixed' ? pv : ''
     if (pv === 'fixed' || p.useStickyClasses) {
@@ -267,5 +267,5 @@ const instance = this.addInstance(el, p)
   const tC = this.toggleClasses
-  const scroll = (this.isWin || document.querySelector(se).getBoundingClientRect().top)
+  const scroll = (this.isWin || se.getBoundingClientRect().top)
     ? window.scrollY || window.pageYOffset
-    : document.querySelector(se).scrollTop
+    : se.scrollTop
   const notSticky = scroll > start && scroll < stop && (state === 'default' || state === 'stuck')
@@ -272,0 +272,0 @@ const isSticky = scroll <= start && state === 'sticky'

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

Worsened metrics

Total package byte prevSize

67781

decreased by-7.4%

Number of package files

13

decreased by-7.14%

Lines of code

1136

decreased by-1.3%

Number of lines in readme file

320

decreased by-0.93%

No dependency changes