Updated stickyfill

Author: xriley

assets/plugins/stickyfill/.editorconfig

@@ -23,6 +23,21 @@ Check out [the demo](http://wd.dizaina.net/en/scripts/stickyfill/) and [use case
 - doesn't work in overflowed blocks,
 - doesn't parse your CSS! Launch it manually.
 
+----
+
+<p align="center">
+    <a href="#installation">Installation</a>&nbsp;&nbsp;
+    <a href="#usage">Usage</a>&nbsp;&nbsp;
+    <a href="#pro-tips">Pro tips</a>&nbsp;&nbsp;
+    <a href="#api">API</a>&nbsp;&nbsp;
+    <a href="#feature-requests">Feature requests</a>&nbsp;&nbsp;
+    <a href="#bug-reports">Bug reports</a>&nbsp;&nbsp;
+    <a href="#contributing">Contributing</a>&nbsp;&nbsp;
+    <a href="#using-stickyfill">Buy me a beer</a>
+</p>
+
+----
+
 ## Installation
 
 ### NPM
@@ -149,6 +164,10 @@ Removes stickies associated with the elements in the list.
 
 Removes all existing stickies.
 
+#### `Stickyfill.forceSticky()`
+
+Force-enable the polyfill, even if the browser supports `position: sticky` natively.
+
 #### `Stickyfill.stickies`
 
 Array of existing [Sticky](#Stickyfill.Sticky) instances.
@@ -206,7 +225,7 @@ Ok, you are all set.
 
 ### Building and testing
 
-`cd` into the repo folder and run `grunt`. It will build the project from `/src/strickyfill.js` into `/dist` and run the watcher that will rebuild the project every time you change something in the source file.
+`cd` into the repo folder and run `grunt`. It will build the project from `/src/stickyfill.js` into `/dist` and run the watcher that will rebuild the project every time you change something in the source file.
 
 Make changes to the source file. Stick to ES6 syntax.
 
@@ -222,7 +241,7 @@ Use [Yarn](https://yarnpkg.com/), dont’t forget to commit `yarn.lock`.
 
 ## Using Stickyfill?
 
-🍻 [Buy me a beer](https://www.paypal.me/wilddeer/0usd)
+🍻 [Buy me a beer](https://www.paypal.me/wilddeer/3usd)
 
 ## License
 

assets/plugins/stickyfill/.gitignore

@@ -1,6 +1,6 @@
 /*!
   * Stickyfill – `position: sticky` polyfill
-  * v. 2.0.5 | https://github.com/wilddeer/stickyfill
+  * v. 2.1.0 | https://github.com/wilddeer/stickyfill
   * MIT License
   */
 
@@ -13,8 +13,10 @@
  */
 let seppuku = false;
 
-// The polyfill cant’t function properly without `getComputedStyle`.
-if (!window.getComputedStyle) seppuku = true;
+const isWindowDefined = typeof window !== 'undefined';
+
+// The polyfill can’t function properly without `window` or `window.getComputedStyle`.
+if (!isWindowDefined || !window.getComputedStyle) seppuku = true;
 // Dont’t get in a way if the browser supports `position: sticky` natively.
 else {
     const testNode = document.createElement('div');
@@ -35,6 +37,7 @@ else {
 /*
  * 2. “Global” vars used across the polyfill
  */
+let isInitialized = false;
 
 // Check if Shadow Root constructor exists to make further checks simpler
 const shadowRootExists = typeof ShadowRoot !== 'undefined';
@@ -106,6 +109,7 @@ class Sticky {
          */
         const nodeComputedStyle = getComputedStyle(node);
         const nodeComputedProps = {
+            position: nodeComputedStyle.position,
             top: nodeComputedStyle.top,
             display: nodeComputedStyle.display,
             marginTop: nodeComputedStyle.marginTop,
@@ -127,7 +131,16 @@ class Sticky {
         this._active = true;
 
         /*
-         * 3. Get necessary node parameters
+         * 3. Check if the current node position is `sticky`. If it is, it means that the browser supports sticky positioning,
+         *    but the polyfill was force-enabled. We set the node’s position to `static` before continuing, so that the node
+         *    is in it’s initial position when we gather its params.
+         */
+        const originalPosition = node.style.position;
+        if (nodeComputedStyle.position == 'sticky' || nodeComputedStyle.position == '-webkit-sticky')
+            node.style.position = 'static';
+
+        /*
+         * 4. Get necessary node parameters
          */
         const referenceNode = node.parentNode;
         const parentNode = shadowRootExists && referenceNode instanceof ShadowRoot? referenceNode.host: referenceNode;
@@ -152,7 +165,7 @@ class Sticky {
             right: -nodeWinOffset.right + parentWinOffset.right - parseNumeric(parentComputedStyle.borderRightWidth)
         };
         this._styles = {
-            position: node.style.position,
+            position: originalPosition,
             top: node.style.top,
             bottom: node.style.bottom,
             left: node.style.left,
@@ -172,7 +185,7 @@ class Sticky {
         };
 
         /*
-         * 4. Ensure that the node will be positioned relatively to the parent node
+         * 5. Ensure that the node will be positioned relatively to the parent node
          */
         const parentPosition = parentComputedStyle.position;
 
@@ -184,13 +197,13 @@ class Sticky {
         }
 
         /*
-         * 5. Recalc node position.
+         * 6. Recalc node position.
          *    It’s important to do this before clone injection to avoid scrolling bug in Chrome.
          */
         this._recalcPosition();
 
         /*
-         * 6. Create a clone
+         * 7. Create a clone
          */
         const clone = this._clone = {};
         clone.node = document.createElement('div');
@@ -323,6 +336,13 @@ const Stickyfill = {
     stickies,
     Sticky,
 
+    forceSticky () {
+        seppuku = false;
+        init();
+
+        this.refreshAll();
+    },
+
     addOne (node) {
         // Check whether it’s a node
         if (!(node instanceof HTMLElement)) {
@@ -428,6 +448,12 @@ const Stickyfill = {
  * 6. Setup events (unless the polyfill was disabled)
  */
 function init () {
+    if (isInitialized) {
+        return;
+    }
+
+    isInitialized = true;
+
     // Watch for scroll position changes and trigger recalc/refresh if needed
     function checkScroll () {
         if (window.pageXOffset != scroll.left) {
@@ -501,7 +527,7 @@ if (!seppuku) init();
 if (typeof module != 'undefined' && module.exports) {
     module.exports = Stickyfill;
 }
-else {
+else if (isWindowDefined) {
     window.Stickyfill = Stickyfill;
 }
 

assets/plugins/stickyfill/Gruntfile.js

@@ -1,6 +1,6 @@
 /*!
   * Stickyfill – `position: sticky` polyfill
-  * v. 2.0.5 | https://github.com/wilddeer/stickyfill
+  * v. 2.1.0 | https://github.com/wilddeer/stickyfill
   * MIT License
   */
 
@@ -19,24 +19,29 @@
 
     var seppuku = false;
 
-    // The polyfill cant’t function properly without `getComputedStyle`.
-    if (!window.getComputedStyle) seppuku = true;
+    var isWindowDefined = typeof window !== 'undefined';
+    
+    // The polyfill can’t function properly without `window` or `window.getComputedStyle`.
+    if (!isWindowDefined || !window.getComputedStyle) seppuku = true;
     // Dont’t get in a way if the browser supports `position: sticky` natively.
     else {
-            var testNode = document.createElement('div');
+            (function () {
+                var testNode = document.createElement('div');
 
-            if (['', '-webkit-', '-moz-', '-ms-'].some(function (prefix) {
-                try {
-                    testNode.style.position = prefix + 'sticky';
-                } catch (e) {}
+                if (['', '-webkit-', '-moz-', '-ms-'].some(function (prefix) {
+                    try {
+                        testNode.style.position = prefix + 'sticky';
+                    } catch (e) {}
 
-                return testNode.style.position != '';
-            })) seppuku = true;
+                    return testNode.style.position != '';
+                })) seppuku = true;
+            })();
         }
 
     /*
      * 2. “Global” vars used across the polyfill
      */
+    var isInitialized = false;
 
     // Check if Shadow Root constructor exists to make further checks simpler
     var shadowRootExists = typeof ShadowRoot !== 'undefined';
@@ -111,6 +116,7 @@
                  */
                 var nodeComputedStyle = getComputedStyle(node);
                 var nodeComputedProps = {
+                    position: nodeComputedStyle.position,
                     top: nodeComputedStyle.top,
                     display: nodeComputedStyle.display,
                     marginTop: nodeComputedStyle.marginTop,
@@ -128,7 +134,15 @@
                 this._active = true;
 
                 /*
-                 * 3. Get necessary node parameters
+                 * 3. Check if the current node position is `sticky`. If it is, it means that the browser supports sticky positioning,
+                 *    but the polyfill was force-enabled. We set the node’s position to `static` before continuing, so that the node
+                 *    is in it’s initial position when we gather its params.
+                 */
+                var originalPosition = node.style.position;
+                if (nodeComputedStyle.position == 'sticky' || nodeComputedStyle.position == '-webkit-sticky') node.style.position = 'static';
+    
+                /*
+                 * 4. Get necessary node parameters
                  */
                 var referenceNode = node.parentNode;
                 var parentNode = shadowRootExists && referenceNode instanceof ShadowRoot ? referenceNode.host : referenceNode;
@@ -153,7 +167,7 @@
                     right: -nodeWinOffset.right + parentWinOffset.right - parseNumeric(parentComputedStyle.borderRightWidth)
                 };
                 this._styles = {
-                    position: node.style.position,
+                    position: originalPosition,
                     top: node.style.top,
                     bottom: node.style.bottom,
                     left: node.style.left,
@@ -171,7 +185,7 @@
                 };
 
                 /*
-                 * 4. Ensure that the node will be positioned relatively to the parent node
+                 * 5. Ensure that the node will be positioned relatively to the parent node
                  */
                 var parentPosition = parentComputedStyle.position;
 
@@ -180,13 +194,13 @@
                 }
 
                 /*
-                 * 5. Recalc node position.
+                 * 6. Recalc node position.
                  *    It’s important to do this before clone injection to avoid scrolling bug in Chrome.
                  */
                 this._recalcPosition();
 
                 /*
-                 * 6. Create a clone
+                 * 7. Create a clone
                  */
                 var clone = this._clone = {};
                 clone.node = document.createElement('div');
@@ -330,6 +344,12 @@
         stickies: stickies,
         Sticky: Sticky,
 
+        forceSticky: function forceSticky() {
+            seppuku = false;
+            init();
+    
+            this.refreshAll();
+        },
         addOne: function addOne(node) {
             // Check whether it’s a node
             if (!(node instanceof HTMLElement)) {
@@ -380,9 +400,9 @@
             };
 
             for (var i = 0; i < nodeList.length; i++) {
-                var _ret = _loop(i);
+                var _ret2 = _loop(i);
 
-                if (_ret === 'continue') continue;
+                if (_ret2 === 'continue') continue;
             }
 
             return addedStickies;
@@ -442,6 +462,12 @@
      * 6. Setup events (unless the polyfill was disabled)
      */
     function init() {
+        if (isInitialized) {
+            return;
+        }
+    
+        isInitialized = true;
+    
         // Watch for scroll position changes and trigger recalc/refresh if needed
         function checkScroll() {
             if (window.pageXOffset != scroll.left) {
@@ -513,7 +539,7 @@
      */
     if (typeof module != 'undefined' && module.exports) {
         module.exports = Stickyfill;
-    } else {
+    } else if (isWindowDefined) {
         window.Stickyfill = Stickyfill;
     }