stickybits - npm Package Compare versions

Comparing version 1.5.0 to 1.5.2

dist/jquery.stickybits.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
-  typeof define === 'function' && define.amd ? define(factory) :
-  (factory());
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	(factory());
 }(this, (function () { 'use strict';
@@ -74,3 +74,3 @@
   var isWin = se === window;
-  var seOffset = this.positionVal !== 'fixed' ? 0 : se.getBoundingClientRect().top;
+  var seOffset = !isWin && this.positionVal === 'fixed' ? se.getBoundingClientRect().top : 0;
   var offset = seOffset + this.offset;
@@ -77,0 +77,0 @@ var rAF = typeof se.requestAnimationFrame !== 'undefined' ? se.requestAnimationFrame : function rAFDummy(f) {

dist/jquery.stickybits.min.js

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

dist/stickybits.es.js

@@ -68,3 +68,3 @@ /*
   var isWin = se === window;
-  var seOffset = this.positionVal !== 'fixed' ? 0 : se.getBoundingClientRect().top;
+  var seOffset = !isWin && this.positionVal === 'fixed' ? se.getBoundingClientRect().top : 0;
   var offset = seOffset + this.offset;
@@ -71,0 +71,0 @@ var rAF = typeof se.requestAnimationFrame !== 'undefined' ? se.requestAnimationFrame : function rAFDummy(f) {

dist/stickybits.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-  typeof define === 'function' && define.amd ? define(factory) :
-  (global.stickybits = factory());
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	(global.stickybits = factory());
 }(this, (function () { 'use strict';
@@ -74,3 +74,3 @@
   var isWin = se === window;
-  var seOffset = this.positionVal !== 'fixed' ? 0 : se.getBoundingClientRect().top;
+  var seOffset = !isWin && this.positionVal === 'fixed' ? se.getBoundingClientRect().top : 0;
   var offset = seOffset + this.offset;
@@ -77,0 +77,0 @@ var rAF = typeof se.requestAnimationFrame !== 'undefined' ? se.requestAnimationFrame : function rAFDummy(f) {

dist/stickybits.min.js

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

package.json

 {
   "name": "stickybits",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "Stickybits is a lightweight alternative to `position: sticky` polyfills",
@@ -5,0 +5,0 @@ "main": "dist/stickybits.js",

README.md

@@ -186,4 +186,12 @@ <p align="center">
 
-We strayed away from calling Stickybits a Shim or Polyfill for `position: sticky` because full support would require more code. This plugin simply makes elements vertically sticky very similarly to `position: fixed` but in a `sticky` sort of way. Read more about position sticky [here](https://developer.mozilla.org/en-US/docs/Web/CSS/position) or follow its browser implementation [here](http://caniuse.com/#search=sticky).  
+Stickybits is not a Shim or Polyfill for `position: sticky` because full support would require more code. This plugin makes elements vertically sticky very similarly to `position: fixed` but in a `sticky` sort of way. Read more about position sticky [here](https://developer.mozilla.org/en-US/docs/Web/CSS/position) or follow its browser implementation [here](http://caniuse.com/#search=sticky).  
 
+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. 
+
+**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!
+
 <h3 id="jquery">jQuery and Zepto Usage</h3>
@@ -231,2 +239,4 @@
 
+**Contributions:** Much browser and documentation debugging has be done by [kvanberendonck](https://github.com/kvanberendonck). 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! 
+
 ----
@@ -233,0 +243,0 @@

src/stickybits.js

@@ -70,3 +70,3 @@ /*
   const isWin = se === window
-  const seOffset = this.positionVal !== 'fixed' ? 0 : se.getBoundingClientRect().top
+  const seOffset = (!isWin && this.positionVal === 'fixed') ? se.getBoundingClientRect().top : 0
   const offset = seOffset + this.offset
@@ -99,3 +99,3 @@ const rAF = typeof se.requestAnimationFrame !== 'undefined' ? se.requestAnimationFrame : function rAFDummy(f) { f() }
   const stickyStop = (stickyStart + parent.offsetHeight) -
-      (el.offsetHeight - offset)
+    (el.offsetHeight - offset)
   let state = 'default'
@@ -102,0 +102,0 @@

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

42330

increased by3.44%

Number of lines in readme file

244

increased by4.27%

No dependency changes