stickybits - npm Package Compare versions

Comparing version 3.1.1 to 3.2.0

CHANGELOG.md

@@ -0,1 +1,7 @@
+<a name="3.1.1"></a>
+## [3.1.1](https://github.com/dollarshaveclub/stickybits/compare/3.1.0...3.1.1) (2018-02-26)
+
+
+
+
 <a name="3.1.0"></a>
@@ -7,73 +13,235 @@ # [3.1.0](https://github.com/dollarshaveclub/stickybits/compare/3.0.5...3.1.0) (2018-02-25)
 
-# Changelog
+<a name="3.0.5"></a>
+## [3.0.5](https://github.com/dollarshaveclub/stickybits/compare/3.0.4...3.0.5) (2018-02-25)
 
-All notable changes to `dollarshaveclub/stickybits` will be documented in this file.
 
-Updates should follow the [Keep a CHANGELOG](http://keepachangelog.com/) principles.
 
-## [2.0.15] - [2.0.7] - 2017-06-17
 
-> Sorry if this is incorrect. I'm not update to date on changelogs.
+<a name="3.0.4"></a>
+## [3.0.4](https://github.com/dollarshaveclub/stickybits/compare/3.0.3...3.0.4) (2018-02-13)
 
-### Updated
-- Updated K. Vanberendonck's Github username. ([282f622](https://github.com/dollarshaveclub/stickybits/commit/282f62265628a1b47f4a51cc5cdd13f6b3981422))
-- Updated dependencies _things_.
-  - chore(package): update rollup to version 0.52.1 (#170)
-  - chore(package): update rollup to version 0.52.0 (#163) 
-  - chore(package): update rollup to version 0.51.8 (#158)
-  - chore(package): update rollup to version 0.51.6 (#157)
 
-### Fixed 
-- Fixed offset issue.
-  - Rosivanov master (#164)
 
-### Added 
-- Added Module
-  - Add "module" property (#147)
 
-## [2.0.6] - 2017-10-17
+<a name="3.0.3"></a>
+## [3.0.3](https://github.com/dollarshaveclub/stickybits/compare/3.0.1...3.0.3) (2018-02-13)
 
-### Fixed
-- Fix instance. ([2bd7450](https://github.com/dollarshaveclub/stickybits/commit/2bd745048f3bf7f7caa8ed8ca487067dba0b7bae))
-- Fix rAF check. ([3057b5d](https://github.com/dollarshaveclub/stickybits/commit/3057b5db8e2d1be8fe9c6306bb7638a3dcdf8cdf))
 
-### Removed
-- Remove unused method. ([30f2315](https://github.com/dollarshaveclub/stickybits/commit/30f2315187438cf2689f7ae9e6792b591322ac74))
 
-## [2.0.4] - 2017-10-10
 
-### Updated
-- Update eslint-config-airbnb to version 16.0.0 ([bcb3892](https://github.com/dollarshaveclub/stickybits/commit/bcb389234ae73472dcd27398e93a1e785abb672b))
-- Changes check for rAF ([878af2f](https://github.com/dollarshaveclub/stickybits/commit/878af2fd851c2fbbdea2707261c3a2d53f5bec6b))
+<a name="3.0.1"></a>
+## [3.0.1](https://github.com/dollarshaveclub/stickybits/compare/3.0.0...3.0.1) (2018-01-31)
 
-## [2.0.3] - 2017-10-05
 
-### Updated
-- Format `package.json`. ([e951d58](https://github.com/dollarshaveclub/stickybits/commit/e951d58cc98aada756cbd0b65fc61539ebb090e8))
 
-### Fixed
-- Fixes stickyClass at 0. ([a3639ca](https://github.com/dollarshaveclub/stickybits/commit/a3639ca2fd0eb155d982dbad0ddfa063e4f2f87a))
-- Fix stickyStart & stickyStop class removal. ([a1662b2](https://github.com/dollarshaveclub/stickybits/commit/a1662b2896845a3a58d0ba8b4fd6147fe15cbeb6))
 
-## [2.0.2] - 2017-10-02
+<a name="3.0.0"></a>
+# [3.0.0](https://github.com/dollarshaveclub/stickybits/compare/2.1.2...3.0.0) (2018-01-31)
 
-### Fixed
-- Fixes positionVal in browsers issue. ([72f3ece](https://github.com/dollarshaveclub/stickybits/commit/72f3ece89320263b65bd1bf769a23d74ab03586c))
 
-## [2.0.1] - 2017-09-30
 
-## [1.5.3] - 2017-08-05
 
-## [1.5.2] - 2017-08-01
+<a name="2.1.2"></a>
+## [2.1.2](https://github.com/dollarshaveclub/stickybits/compare/2.1.1...2.1.2) (2018-01-24)
 
-## [1.5.0] - 2017-07-25
 
-[unreleased]: https://github.com/dollarshaveclub/stickybits/compare/2.0.6...HEAD
-[2.0.6]: https://github.com/dollarshaveclub/stickybits/compare/2.0.4...2.0.6
-[2.0.4]: https://github.com/dollarshaveclub/stickybits/compare/2.0.3...2.0.4
-[2.0.3]: https://github.com/dollarshaveclub/stickybits/compare/2.0.2...2.0.3
-[2.0.2]: https://github.com/dollarshaveclub/stickybits/compare/2.0.1...2.0.2
-[2.0.1]: https://github.com/dollarshaveclub/stickybits/compare/1.5.3...2.0.1
-[1.5.3]: https://github.com/dollarshaveclub/stickybits/compare/1.5.2...1.5.3
-[1.5.2]: https://github.com/dollarshaveclub/stickybits/compare/1.5.0...1.5.2
-[1.5.0]: https://github.com/dollarshaveclub/stickybits/compare/1.4.4...1.5.0
+
+
+<a name="2.1.1"></a>
+## [2.1.1](https://github.com/dollarshaveclub/stickybits/compare/2.0.13...2.1.1) (2018-01-16)
+
+
+
+
+<a name="2.0.13"></a>
+## [2.0.13](https://github.com/dollarshaveclub/stickybits/compare/2.0.10...2.0.13) (2017-12-06)
+
+
+
+
+<a name="2.0.10"></a>
+## [2.0.10](https://github.com/dollarshaveclub/stickybits/compare/2.0.9...2.0.10) (2017-11-09)
+
+
+
+
+<a name="2.0.9"></a>
+## [2.0.9](https://github.com/dollarshaveclub/stickybits/compare/2.0.8...2.0.9) (2017-10-31)
+
+
+
+
+<a name="2.0.8"></a>
+## [2.0.8](https://github.com/dollarshaveclub/stickybits/compare/2.0.7...2.0.8) (2017-10-21)
+
+
+
+
+<a name="2.0.7"></a>
+## [2.0.7](https://github.com/dollarshaveclub/stickybits/compare/2.0.6...2.0.7) (2017-10-20)
+
+
+
+
+<a name="2.0.6"></a>
+## [2.0.6](https://github.com/dollarshaveclub/stickybits/compare/2.0.4...2.0.6) (2017-10-17)
+
+
+
+
+<a name="2.0.4"></a>
+## [2.0.4](https://github.com/dollarshaveclub/stickybits/compare/2.0.3...2.0.4) (2017-10-10)
+
+
+
+
+<a name="2.0.3"></a>
+## [2.0.3](https://github.com/dollarshaveclub/stickybits/compare/2.0.2...2.0.3) (2017-10-06)
+
+
+
+
+<a name="2.0.2"></a>
+## [2.0.2](https://github.com/dollarshaveclub/stickybits/compare/2.0.1...2.0.2) (2017-10-02)
+
+
+
+
+<a name="2.0.1"></a>
+## [2.0.1](https://github.com/dollarshaveclub/stickybits/compare/1.5.3...2.0.1) (2017-09-29)
+
+
+
+
+<a name="1.5.3"></a>
+## [1.5.3](https://github.com/dollarshaveclub/stickybits/compare/1.5.2...1.5.3) (2017-08-06)
+
+
+
+
+<a name="1.5.2"></a>
+## [1.5.2](https://github.com/dollarshaveclub/stickybits/compare/1.5.0...1.5.2) (2017-08-02)
+
+
+
+
+<a name="1.5.0"></a>
+# [1.5.0](https://github.com/dollarshaveclub/stickybits/compare/1.4.4...1.5.0) (2017-07-25)
+
+
+
+
+<a name="1.4.4"></a>
+## [1.4.4](https://github.com/dollarshaveclub/stickybits/compare/1.3.12...1.4.4) (2017-07-25)
+
+
+
+
+<a name="1.3.12"></a>
+## [1.3.12](https://github.com/dollarshaveclub/stickybits/compare/1.3.10...1.3.12) (2017-07-17)
+
+
+
+
+<a name="1.3.10"></a>
+## [1.3.10](https://github.com/dollarshaveclub/stickybits/compare/1.3.8...1.3.10) (2017-07-15)
+
+
+
+
+<a name="1.3.8"></a>
+## [1.3.8](https://github.com/dollarshaveclub/stickybits/compare/1.3.5...1.3.8) (2017-07-04)
+
+
+
+
+<a name="1.2.10"></a>
+## [1.2.10](https://github.com/dollarshaveclub/stickybits/compare/1.2.8...1.2.10) (2017-05-22)
+
+
+
+
+<a name="1.2.8"></a>
+## [1.2.8](https://github.com/dollarshaveclub/stickybits/compare/1.2.7...1.2.8) (2017-04-20)
+
+
+
+
+<a name="1.2.7"></a>
+## [1.2.7](https://github.com/dollarshaveclub/stickybits/compare/1.2.6...1.2.7) (2017-04-19)
+
+
+
+
+<a name="1.2.6"></a>
+## [1.2.6](https://github.com/dollarshaveclub/stickybits/compare/1.2.5...1.2.6) (2017-04-19)
+
+
+
+
+<a name="1.2.5"></a>
+## [1.2.5](https://github.com/dollarshaveclub/stickybits/compare/1.2.4...1.2.5) (2017-04-19)
+
+
+
+
+<a name="1.2.4"></a>
+## [1.2.4](https://github.com/dollarshaveclub/stickybits/compare/1.2.3...1.2.4) (2017-04-19)
+
+
+
+
+<a name="1.2.3"></a>
+## [1.2.3](https://github.com/dollarshaveclub/stickybits/compare/1.1.3...1.2.3) (2017-04-19)
+
+
+
+
+<a name="1.1.3"></a>
+## [1.1.3](https://github.com/dollarshaveclub/stickybits/compare/1.1.2...1.1.3) (2017-04-07)
+
+
+
+
+<a name="1.1.2"></a>
+## [1.1.2](https://github.com/dollarshaveclub/stickybits/compare/1.0.2...1.1.2) (2017-04-01)
+
+
+
+
+<a name="1.0.2"></a>
+## [1.0.2](https://github.com/dollarshaveclub/stickybits/compare/1.0.1...1.0.2) (2017-03-28)
+
+
+
+
+<a name="1.0.1"></a>
+## [1.0.1](https://github.com/dollarshaveclub/stickybits/compare/1.0.0...1.0.1) (2017-03-24)
+
+
+
+
+<a name="1.0.0"></a>
+# [1.0.0](https://github.com/dollarshaveclub/stickybits/compare/0.0.4...1.0.0) (2017-03-23)
+
+
+
+
+<a name="0.0.4"></a>
+## [0.0.4](https://github.com/dollarshaveclub/stickybits/compare/0.0.3...0.0.4) (2017-02-27)
+
+
+
+
+<a name="0.0.3"></a>
+## [0.0.3](https://github.com/dollarshaveclub/stickybits/compare/0.0.2...0.0.3) (2017-02-22)
+
+
+
+
+<a name="0.0.2"></a>
+## 0.0.2 (2017-02-22)
+
+
+
+

dist/jquery.stickybits.js

 /**
   stickybits - Stickybits is a lightweight alternative to `position: sticky` polyfills
-  @version v3.1.1
+  @version v3.2.0
   @link https://github.com/dollarshaveclub/stickybits#readme
@@ -68,5 +68,6 @@ @author Jeff Wainwright <[e-mail]> (https://jeffry.in)
   var o = typeof obj !== 'undefined' ? obj : {};
-  this.version = '"3.1.1"';
+  this.version = '"3.2.0"';
   this.userAgent = window.navigator.userAgent || 'no `userAgent` provided by the browser';
   this.props = {
+    customStickyChangeNumber: o.customStickyChangeNumber || null,
     noStyles: o.noStyles || false,
@@ -78,2 +79,3 @@ stickyBitStickyOffset: o.stickyBitStickyOffset || 0,
     stuckClass: o.stuckClass || 'js-is-stuck',
+    stickyChangeClass: o.stickyChangeClass || 'js-is-sticky--change',
     useStickyClasses: o.useStickyClasses || false,
@@ -220,2 +222,3 @@ verticalPosition: o.verticalPosition || 'top'
   var p = it.props;
+  var el = it.el;
   var parent = it.parent;
@@ -226,4 +229,6 @@ var isCustom = !this.isWin && p.positionVal === 'fixed';
   var stickyStart = isCustom ? parent.getBoundingClientRect().top - scrollElOffset : parent.getBoundingClientRect().top;
+  var stickyChangeOffset = p.customStickyChangeNumber !== null ? p.customStickyChangeNumber : el.offsetHeight;
   it.offset = scrollElOffset + p.stickyBitStickyOffset;
   it.stickyStart = isBottom ? stickyStart - it.offset : 0;
+  it.stickyChange = it.stickyStart + stickyChangeOffset;
   it.stickyStop = isBottom ? stickyStart + parent.offsetHeight - (it.el.offsetHeight + it.offset) : stickyStart + parent.offsetHeight;
@@ -266,2 +271,3 @@ return it;
   var start = it.stickyStart;
+  var change = it.stickyChange;
   var stop = it.stickyStop;
@@ -274,2 +280,3 @@ var stl = e.style; // cache props
   var sticky = p.stickyClass;
+  var stickyChange = p.stickyChangeClass;
   var stuck = p.stuckClass;
@@ -337,2 +344,16 @@ var vp = p.verticalPosition;
 
+  var isStickyChange = scroll >= change && scroll <= stop;
+  var isNotStickyChange = scroll < change || scroll > stop;
+  var stub = 'stub'; // a stub css class to remove
+
+  if (isNotStickyChange) {
+    rAF(function () {
+      tC(e, stickyChange);
+    });
+  } else if (isStickyChange) {
+    rAF(function () {
+      tC(e, stub, stickyChange);
+    });
+  }
+
   return it;
@@ -339,0 +360,0 @@ };

dist/jquery.stickybits.min.js

 /**
   stickybits - Stickybits is a lightweight alternative to `position: sticky` polyfills
-  @version v3.1.1
+  @version v3.2.0
   @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.1.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:document.querySelector(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="fixed"!==r?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=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)})}});
+!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.2.0"',this.userAgent=window.navigator.userAgent||"no `userAgent` provided by the browser",this.props={customStickyChangeNumber:e.customStickyChangeNumber||null,noStyles:e.noStyles||!1,stickyBitStickyOffset:e.stickyBitStickyOffset||0,parentClass:e.parentClass||"js-stickybit-parent",scrollEl:document.querySelector(e.scrollEl)||window,stickyClass:e.stickyClass||"js-is-sticky",stuckClass:e.stuckClass||"js-is-stuck",stickyChangeClass:e.stickyChangeClass||"js-is-sticky--change",useStickyClasses:e.useStickyClasses||!1,verticalPosition:e.verticalPosition||"top"};var i=this.props;i.positionVal=this.definePosition()||"fixed";var n=i.verticalPosition,o=i.noStyles,a=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 l=this.els[r],c=l.style;if(c[n]="top"!==n||o?"":i.stickyBitStickyOffset+"px",c.position="fixed"!==a?a:"","fixed"===a||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 n=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)},n.addEventListener("scroll",i.stateContainer),i},t.prototype.getClosestParent=function(t,s){var e=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.el,n=s.parent,o=!this.isWin&&"fixed"===e.positionVal,a="bottom"!==e.verticalPosition,r=o?e.scrollEl.getBoundingClientRect().top:0,l=o?n.getBoundingClientRect().top-r:n.getBoundingClientRect().top,c=null!==e.customStickyChangeNumber?e.customStickyChangeNumber:i.offsetHeight;return s.offset=r+e.stickyBitStickyOffset,s.stickyStart=a?l-s.offset:0,s.stickyChange=s.stickyStart+c,s.stickyStop=a?l+n.offsetHeight-(s.el.offsetHeight+s.offset):l+n.offsetHeight,s},t.prototype.toggleClasses=function(t,s,e){var i=t,n=i.className.split(" ");e&&-1===n.indexOf(e)&&n.push(e);var o=n.indexOf(s);-1!==o&&n.splice(o,1),i.className=n.join(" ")},t.prototype.manageState=function(t){var s=t,e=s.el,i=s.props,n=s.state,o=s.stickyStart,a=s.stickyChange,r=s.stickyStop,l=e.style,c=i.noStyles,p=i.positionVal,f=i.scrollEl,u=i.stickyClass,y=i.stickyChangeClass,d=i.stuckClass,h=i.verticalPosition,k=function(t){t()},g=this.isWin&&(window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame)||k,m=this.toggleClasses,C=this.isWin||f.getBoundingClientRect().top?window.scrollY||window.pageYOffset:f.scrollTop,v=C<=o&&"sticky"===n,w=C>=r&&"sticky"===n;C>o&&C<r&&("default"===n||"stuck"===n)?(s.state="sticky",g(function(){m(e,d,u),l.position=p,c||(l.bottom="",l[h]=i.stickyBitStickyOffset+"px")})):v?(s.state="default",g(function(){m(e,u),"fixed"===p&&(l.position="")})):w&&(s.state="stuck",g(function(){m(e,u,d),"fixed"!==p||c||(l.top="",l.bottom="0",l.position="absolute")}));var S=C>=a&&C<=r;return C<a||C>r?g(function(){m(e,y)}):S&&g(function(){m(e,"stub",y)}),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.1.1
+  @version v3.2.0
   @link https://github.com/dollarshaveclub/stickybits#readme
@@ -62,5 +62,6 @@ @author Jeff Wainwright <[e-mail]> (https://jeffry.in)
   var o = typeof obj !== 'undefined' ? obj : {};
-  this.version = '"3.1.1"';
+  this.version = '"3.2.0"';
   this.userAgent = window.navigator.userAgent || 'no `userAgent` provided by the browser';
   this.props = {
+    customStickyChangeNumber: o.customStickyChangeNumber || null,
     noStyles: o.noStyles || false,
@@ -72,2 +73,3 @@ stickyBitStickyOffset: o.stickyBitStickyOffset || 0,
     stuckClass: o.stuckClass || 'js-is-stuck',
+    stickyChangeClass: o.stickyChangeClass || 'js-is-sticky--change',
     useStickyClasses: o.useStickyClasses || false,
@@ -214,2 +216,3 @@ verticalPosition: o.verticalPosition || 'top'
   var p = it.props;
+  var el = it.el;
   var parent = it.parent;
@@ -220,4 +223,6 @@ var isCustom = !this.isWin && p.positionVal === 'fixed';
   var stickyStart = isCustom ? parent.getBoundingClientRect().top - scrollElOffset : parent.getBoundingClientRect().top;
+  var stickyChangeOffset = p.customStickyChangeNumber !== null ? p.customStickyChangeNumber : el.offsetHeight;
   it.offset = scrollElOffset + p.stickyBitStickyOffset;
   it.stickyStart = isBottom ? stickyStart - it.offset : 0;
+  it.stickyChange = it.stickyStart + stickyChangeOffset;
   it.stickyStop = isBottom ? stickyStart + parent.offsetHeight - (it.el.offsetHeight + it.offset) : stickyStart + parent.offsetHeight;
@@ -260,2 +265,3 @@ return it;
   var start = it.stickyStart;
+  var change = it.stickyChange;
   var stop = it.stickyStop;
@@ -268,2 +274,3 @@ var stl = e.style; // cache props
   var sticky = p.stickyClass;
+  var stickyChange = p.stickyChangeClass;
   var stuck = p.stuckClass;
@@ -331,2 +338,16 @@ var vp = p.verticalPosition;
 
+  var isStickyChange = scroll >= change && scroll <= stop;
+  var isNotStickyChange = scroll < change || scroll > stop;
+  var stub = 'stub'; // a stub css class to remove
+
+  if (isNotStickyChange) {
+    rAF(function () {
+      tC(e, stickyChange);
+    });
+  } else if (isStickyChange) {
+    rAF(function () {
+      tC(e, stub, stickyChange);
+    });
+  }
+
   return it;
@@ -333,0 +354,0 @@ };

dist/stickybits.js

 /**
   stickybits - Stickybits is a lightweight alternative to `position: sticky` polyfills
-  @version v3.1.1
+  @version v3.2.0
   @link https://github.com/dollarshaveclub/stickybits#readme
@@ -68,5 +68,6 @@ @author Jeff Wainwright <[e-mail]> (https://jeffry.in)
   var o = typeof obj !== 'undefined' ? obj : {};
-  this.version = '"3.1.1"';
+  this.version = '"3.2.0"';
   this.userAgent = window.navigator.userAgent || 'no `userAgent` provided by the browser';
   this.props = {
+    customStickyChangeNumber: o.customStickyChangeNumber || null,
     noStyles: o.noStyles || false,
@@ -78,2 +79,3 @@ stickyBitStickyOffset: o.stickyBitStickyOffset || 0,
     stuckClass: o.stuckClass || 'js-is-stuck',
+    stickyChangeClass: o.stickyChangeClass || 'js-is-sticky--change',
     useStickyClasses: o.useStickyClasses || false,
@@ -220,2 +222,3 @@ verticalPosition: o.verticalPosition || 'top'
   var p = it.props;
+  var el = it.el;
   var parent = it.parent;
@@ -226,4 +229,6 @@ var isCustom = !this.isWin && p.positionVal === 'fixed';
   var stickyStart = isCustom ? parent.getBoundingClientRect().top - scrollElOffset : parent.getBoundingClientRect().top;
+  var stickyChangeOffset = p.customStickyChangeNumber !== null ? p.customStickyChangeNumber : el.offsetHeight;
   it.offset = scrollElOffset + p.stickyBitStickyOffset;
   it.stickyStart = isBottom ? stickyStart - it.offset : 0;
+  it.stickyChange = it.stickyStart + stickyChangeOffset;
   it.stickyStop = isBottom ? stickyStart + parent.offsetHeight - (it.el.offsetHeight + it.offset) : stickyStart + parent.offsetHeight;
@@ -266,2 +271,3 @@ return it;
   var start = it.stickyStart;
+  var change = it.stickyChange;
   var stop = it.stickyStop;
@@ -274,2 +280,3 @@ var stl = e.style; // cache props
   var sticky = p.stickyClass;
+  var stickyChange = p.stickyChangeClass;
   var stuck = p.stuckClass;
@@ -337,2 +344,16 @@ var vp = p.verticalPosition;
 
+  var isStickyChange = scroll >= change && scroll <= stop;
+  var isNotStickyChange = scroll < change || scroll > stop;
+  var stub = 'stub'; // a stub css class to remove
+
+  if (isNotStickyChange) {
+    rAF(function () {
+      tC(e, stickyChange);
+    });
+  } else if (isStickyChange) {
+    rAF(function () {
+      tC(e, stub, stickyChange);
+    });
+  }
+
   return it;
@@ -339,0 +360,0 @@ };

dist/stickybits.min.js

 /**
   stickybits - Stickybits is a lightweight alternative to `position: sticky` polyfills
-  @version v3.1.1
+  @version v3.2.0
   @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.1.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:document.querySelector(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="fixed"!==r?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=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,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,s){var e=void 0!==s?s:{};this.version='"3.2.0"',this.userAgent=window.navigator.userAgent||"no `userAgent` provided by the browser",this.props={customStickyChangeNumber:e.customStickyChangeNumber||null,noStyles:e.noStyles||!1,stickyBitStickyOffset:e.stickyBitStickyOffset||0,parentClass:e.parentClass||"js-stickybit-parent",scrollEl:document.querySelector(e.scrollEl)||window,stickyClass:e.stickyClass||"js-is-sticky",stuckClass:e.stuckClass||"js-is-stuck",stickyChangeClass:e.stickyChangeClass||"js-is-sticky--change",useStickyClasses:e.useStickyClasses||!1,verticalPosition:e.verticalPosition||"top"};var i=this.props;i.positionVal=this.definePosition()||"fixed";var n=i.verticalPosition,o=i.noStyles,a=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 l=this.els[r],c=l.style;if(c[n]="top"!==n||o?"":i.stickyBitStickyOffset+"px",c.position="fixed"!==a?a:"","fixed"===a||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 n=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)},n.addEventListener("scroll",i.stateContainer),i},t.prototype.getClosestParent=function(t,s){var e=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.el,n=s.parent,o=!this.isWin&&"fixed"===e.positionVal,a="bottom"!==e.verticalPosition,r=o?e.scrollEl.getBoundingClientRect().top:0,l=o?n.getBoundingClientRect().top-r:n.getBoundingClientRect().top,c=null!==e.customStickyChangeNumber?e.customStickyChangeNumber:i.offsetHeight;return s.offset=r+e.stickyBitStickyOffset,s.stickyStart=a?l-s.offset:0,s.stickyChange=s.stickyStart+c,s.stickyStop=a?l+n.offsetHeight-(s.el.offsetHeight+s.offset):l+n.offsetHeight,s},t.prototype.toggleClasses=function(t,s,e){var i=t,n=i.className.split(" ");e&&-1===n.indexOf(e)&&n.push(e);var o=n.indexOf(s);-1!==o&&n.splice(o,1),i.className=n.join(" ")},t.prototype.manageState=function(t){var s=t,e=s.el,i=s.props,n=s.state,o=s.stickyStart,a=s.stickyChange,r=s.stickyStop,l=e.style,c=i.noStyles,p=i.positionVal,u=i.scrollEl,f=i.stickyClass,y=i.stickyChangeClass,h=i.stuckClass,d=i.verticalPosition,k=function(t){t()},g=this.isWin&&(window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame)||k,m=this.toggleClasses,C=this.isWin||u.getBoundingClientRect().top?window.scrollY||window.pageYOffset:u.scrollTop,v=C<=o&&"sticky"===n,S=C>=r&&"sticky"===n;C>o&&C<r&&("default"===n||"stuck"===n)?(s.state="sticky",g(function(){m(e,h,f),l.position=p,c||(l.bottom="",l[d]=i.stickyBitStickyOffset+"px")})):v?(s.state="default",g(function(){m(e,f),"fixed"===p&&(l.position="")})):S&&(s.state="stuck",g(function(){m(e,f,h),"fixed"!==p||c||(l.top="",l.bottom="0",l.position="absolute")}));var w=C>=a&&C<=r;return C<a||C>r?g(function(){m(e,y)}):w&&g(function(){m(e,"stub",y)}),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.1.1
+  @version v3.2.0
   @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.1.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:document.querySelector(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="fixed"!==r?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=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)})}});
+!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.2.0"',this.userAgent=window.navigator.userAgent||"no `userAgent` provided by the browser",this.props={customStickyChangeNumber:e.customStickyChangeNumber||null,noStyles:e.noStyles||!1,stickyBitStickyOffset:e.stickyBitStickyOffset||0,parentClass:e.parentClass||"js-stickybit-parent",scrollEl:document.querySelector(e.scrollEl)||window,stickyClass:e.stickyClass||"js-is-sticky",stuckClass:e.stuckClass||"js-is-stuck",stickyChangeClass:e.stickyChangeClass||"js-is-sticky--change",useStickyClasses:e.useStickyClasses||!1,verticalPosition:e.verticalPosition||"top"};var i=this.props;i.positionVal=this.definePosition()||"fixed";var n=i.verticalPosition,o=i.noStyles,a=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 l=this.els[r],c=l.style;if(c[n]="top"!==n||o?"":i.stickyBitStickyOffset+"px",c.position="fixed"!==a?a:"","fixed"===a||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 n=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)},n.addEventListener("scroll",i.stateContainer),i},t.prototype.getClosestParent=function(t,s){var e=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.el,n=s.parent,o=!this.isWin&&"fixed"===e.positionVal,a="bottom"!==e.verticalPosition,r=o?e.scrollEl.getBoundingClientRect().top:0,l=o?n.getBoundingClientRect().top-r:n.getBoundingClientRect().top,c=null!==e.customStickyChangeNumber?e.customStickyChangeNumber:i.offsetHeight;return s.offset=r+e.stickyBitStickyOffset,s.stickyStart=a?l-s.offset:0,s.stickyChange=s.stickyStart+c,s.stickyStop=a?l+n.offsetHeight-(s.el.offsetHeight+s.offset):l+n.offsetHeight,s},t.prototype.toggleClasses=function(t,s,e){var i=t,n=i.className.split(" ");e&&-1===n.indexOf(e)&&n.push(e);var o=n.indexOf(s);-1!==o&&n.splice(o,1),i.className=n.join(" ")},t.prototype.manageState=function(t){var s=t,e=s.el,i=s.props,n=s.state,o=s.stickyStart,a=s.stickyChange,r=s.stickyStop,l=e.style,c=i.noStyles,p=i.positionVal,f=i.scrollEl,u=i.stickyClass,y=i.stickyChangeClass,d=i.stuckClass,h=i.verticalPosition,k=function(t){t()},g=this.isWin&&(window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame)||k,m=this.toggleClasses,C=this.isWin||f.getBoundingClientRect().top?window.scrollY||window.pageYOffset:f.scrollTop,v=C<=o&&"sticky"===n,w=C>=r&&"sticky"===n;C>o&&C<r&&("default"===n||"stuck"===n)?(s.state="sticky",g(function(){m(e,d,u),l.position=p,c||(l.bottom="",l[h]=i.stickyBitStickyOffset+"px")})):v?(s.state="default",g(function(){m(e,u),"fixed"===p&&(l.position="")})):w&&(s.state="stuck",g(function(){m(e,u,d),"fixed"!==p||c||(l.top="",l.bottom="0",l.position="absolute")}));var S=C>=a&&C<=r;return C<a||C>r?g(function(){m(e,y)}):S&&g(function(){m(e,"stub",y)}),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.1.1",
+  "version": "3.2.0",
   "description": "Stickybits is a lightweight alternative to `position: sticky` polyfills",
@@ -18,3 +18,3 @@ "main": "dist/stickybits.js",
     "chore:branch": "git checkout -b chore-changelog",
-    "chore:changelog": "conventional-changelog -p eslint -i CHANGELOG.md -s",
+    "chore:changelog": "conventional-changelog -p eslint -i CHANGELOG.md -s -r 0",
     "chore:pr": "git add . && git commit -m '[chore] updates changelog' --no-verify && git push origin chore-changelog -f",
@@ -72,3 +72,3 @@ "chore": "npm run chore:delete-branch && npm run chore:branch && npm run chore:changelog && npm run chore:pr",
     "qunit": "^2.4.1",
-    "rollup": "0.56.3",
+    "rollup": "0.56.5",
     "rollup-plugin-babel": "^4.0.0-beta.0",
@@ -75,0 +75,0 @@ "rollup-plugin-replace": "^2.0.0",

src/stickybits.js

@@ -58,2 +58,3 @@ /*
   this.props = {
+    customStickyChangeNumber: o.customStickyChangeNumber || null,
     noStyles: o.noStyles || false,
@@ -65,2 +66,3 @@ stickyBitStickyOffset: o.stickyBitStickyOffset || 0,
     stuckClass: o.stuckClass || 'js-is-stuck',
+    stickyChangeClass: o.stickyChangeClass || 'js-is-sticky--change',
     useStickyClasses: o.useStickyClasses || false,
@@ -188,2 +190,3 @@ verticalPosition: o.verticalPosition || 'top',
   const p = it.props
+  const el = it.el
   const parent = it.parent
@@ -196,4 +199,8 @@ const isCustom = !this.isWin && p.positionVal === 'fixed'
     : parent.getBoundingClientRect().top
+  const stickyChangeOffset = p.customStickyChangeNumber !== null
+    ? p.customStickyChangeNumber
+    : el.offsetHeight
   it.offset = scrollElOffset + p.stickyBitStickyOffset
   it.stickyStart = isBottom ? stickyStart - it.offset : 0
+  it.stickyChange = it.stickyStart + stickyChangeOffset
   it.stickyStop = isBottom
@@ -236,2 +243,3 @@ ? (stickyStart + parent.offsetHeight) - (it.el.offsetHeight + it.offset)
   const start = it.stickyStart
+  const change = it.stickyChange
   const stop = it.stickyStop
@@ -244,2 +252,3 @@ const stl = e.style
   const sticky = p.stickyClass
+  const stickyChange = p.stickyChangeClass
   const stuck = p.stuckClass
@@ -309,2 +318,12 @@ const vp = p.verticalPosition
   }
+
+  const isStickyChange = scroll >= change && scroll <= stop
+  const isNotStickyChange = scroll < change || scroll > stop
+  const stub = 'stub' // a stub css class to remove
+  if (isNotStickyChange) {
+    rAF(() => { tC(e, stickyChange) })
+  } else if (isStickyChange) {
+    rAF(() => { tC(e, stub, stickyChange) })
+  }
+
   return it
@@ -311,0 +330,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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Lines of code

1517

increased by5.57%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

79529

decreased by-0.6%

Number of package files

13

decreased by-7.14%

No dependency changes