@traveledmap/sticky-js 1.3.0 → 1.4.0

package/.idea/misc.xml

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="ProjectRootManager">
+  <component name="KubernetesApiProvider"><![CDATA[{}]]></component>
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_11" default="true" project-jdk-name="11" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/out" />
   </component>
 </project>

package/.idea/vcs.xml

@@ -2,5 +2,6 @@
 <project version="4">
   <component name="VcsDirectoryMappings">
     <mapping directory="" vcs="Git" />
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
   </component>
 </project>

package/dist/sticky.compile.js

@@ -42,6 +42,8 @@ var Sticky = /*#__PURE__*/function () {
       stickyContainer: options.stickyContainer || 'body'
     };
     this.updateScrollTopPosition = this.updateScrollTopPosition.bind(this);
+    this.scrollDirection = 'down';
+    this.previousScrollTop = 0;
     this.updateScrollTopPosition();
     window.addEventListener('load', this.updateScrollTopPosition);
     window.addEventListener('scroll', this.updateScrollTopPosition);
@@ -84,7 +86,11 @@ var Sticky = /*#__PURE__*/function () {
       // create container for variables needed in future
       element.sticky = {}; // set default variables
 
-      element.sticky.active = false;
+      element.sticky.active = false; // Keep track of temporary state used when sticky styles animate element size.
+
+      element.sticky.hasSyncedStickySize = false;
+      element.sticky.bottomLocked = false;
+      element.sticky.syncRenderedSizeTimeout = null;
       element.sticky.marginTop = parseInt(element.getAttribute('data-margin-top')) || this.options.marginTop;
       element.sticky.marginBottom = parseInt(element.getAttribute('data-margin-bottom')) || this.options.marginBottom;
       element.sticky.stickyFor = parseInt(element.getAttribute('data-sticky-for')) || this.options.stickyFor;
@@ -99,7 +105,9 @@ var Sticky = /*#__PURE__*/function () {
 
       if (element.tagName.toLowerCase() === 'img') {
         element.onload = function () {
-          return element.sticky.rect = _this2.getRectangle(element);
+          element.sticky.rect = _this2.getRectangle(element);
+
+          _this2.updateElementRenderedSize(element);
         };
       }
 
@@ -189,7 +197,7 @@ var Sticky = /*#__PURE__*/function () {
     key: "onResizeEvents",
     value: function onResizeEvents(element) {
       this.vp = this.getViewportSize();
-      element.sticky.rect = this.getRectangle(element);
+      this.updateElementRenderedSize(element);
       element.sticky.container.rect = this.getRectangle(element.sticky.container);
 
       if (element.sticky.rect.top + element.sticky.rect.height < element.sticky.container.rect.top + element.sticky.container.rect.height && element.sticky.stickyFor < this.vp.width && !element.sticky.active) {
@@ -288,7 +296,31 @@ var Sticky = /*#__PURE__*/function () {
         if (element.sticky.stickyClass) {
           element.classList.add(element.sticky.stickyClass);
         }
+
+        element.sticky.bottomLocked = false;
+
+        if (this.syncRenderedSize(element)) {
+          return;
+        }
       } else if (this.scrollTop > element.sticky.rect.top - element.sticky.marginTop) {
+        // Once we reached the container bottom while scrolling down, keep the
+        // element in the clamped state until the user scrolls back up.
+        if (element.sticky.bottomLocked && this.scrollDirection !== 'up') {
+          this.updateElementRenderedSize(element);
+          this.css(element, {
+            position: 'fixed',
+            width: element.sticky.rect.width + 'px',
+            left: element.sticky.rect.left + 'px',
+            top: element.sticky.container.rect.top + element.sticky.container.offsetHeight - (this.scrollTop + element.sticky.rect.height + element.sticky.marginBottom) + 'px'
+          });
+
+          if (element.sticky.stickyClass) {
+            element.classList.remove(element.sticky.stickyClass);
+          }
+
+          return;
+        }
+
         this.css(element, {
           position: 'fixed',
           width: element.sticky.rect.width + 'px',
@@ -296,6 +328,9 @@ var Sticky = /*#__PURE__*/function () {
         });
 
         if (this.scrollTop + element.sticky.rect.height + element.sticky.marginTop > element.sticky.container.rect.top + element.sticky.container.offsetHeight - element.sticky.marginBottom) {
+          element.sticky.bottomLocked = true;
+          this.updateElementRenderedSize(element);
+
           if (element.sticky.stickyClass) {
             element.classList.remove(element.sticky.stickyClass);
           }
@@ -303,7 +338,15 @@ var Sticky = /*#__PURE__*/function () {
           this.css(element, {
             top: element.sticky.container.rect.top + element.sticky.container.offsetHeight - (this.scrollTop + element.sticky.rect.height + element.sticky.marginBottom) + 'px'
           });
+
+          if (this.syncRenderedSize(element)) {
+            return;
+          }
         } else {
+          if (this.scrollDirection === 'up') {
+            element.sticky.bottomLocked = false;
+          }
+
           if (element.sticky.stickyClass) {
             element.classList.add(element.sticky.stickyClass);
           }
@@ -311,8 +354,16 @@ var Sticky = /*#__PURE__*/function () {
           this.css(element, {
             top: element.sticky.marginTop + 'px'
           });
+
+          if (this.syncRenderedSize(element)) {
+            return;
+          }
         }
       } else {
+        element.sticky.hasSyncedStickySize = false;
+        element.sticky.bottomLocked = false;
+        this.clearScheduledRenderedSizeSync(element);
+
         if (element.sticky.stickyClass) {
           element.classList.remove(element.sticky.stickyClass);
         }
@@ -344,7 +395,8 @@ var Sticky = /*#__PURE__*/function () {
       var _this5 = this;
 
       this.forEach(this.elements, function (element) {
-        element.sticky.rect = _this5.getRectangle(element);
+        _this5.updateElementRenderedSize(element);
+
         element.sticky.container.rect = _this5.getRectangle(element.sticky.container);
 
         _this5.activate(element);
@@ -365,6 +417,8 @@ var Sticky = /*#__PURE__*/function () {
       window.removeEventListener('load', this.updateScrollTopPosition);
       window.removeEventListener('scroll', this.updateScrollTopPosition);
       this.forEach(this.elements, function (element) {
+        _this6.clearScheduledRenderedSizeSync(element);
+
         _this6.destroyResizeEvents(element);
 
         _this6.destroyScrollEvents(element);
@@ -451,6 +505,111 @@ var Sticky = /*#__PURE__*/function () {
         height: height
       };
     }
+    /**
+     * Updates only the rendered width/height of a sticky element without resetting
+     * its stored document position. This keeps the original sticky trigger point
+     * while allowing update() to pick up size changes caused by sticky classes.
+     * @function
+     * @param {node} element - Sticky element
+     */
+
+  }, {
+    key: "updateElementRenderedSize",
+    value: function updateElementRenderedSize(element) {
+      var renderedRect = element.getBoundingClientRect();
+
+      if (!element.sticky.rect) {
+        element.sticky.rect = this.getRectangle(element);
+      }
+
+      element.sticky.rect.width = renderedRect.width;
+      element.sticky.rect.height = renderedRect.height;
+    }
+    /**
+     * Sync rendered size back into sticky measurements and rerun positioning once
+     * after sticky styles had time to animate their dimensions.
+     * @function
+     * @param {node} element - Sticky element
+     * @param {string} reason - Debug reason
+     * @return {boolean}
+     */
+
+  }, {
+    key: "syncRenderedSize",
+    value: function syncRenderedSize(element) {
+      if (element.sticky.hasSyncedStickySize) {
+        return false;
+      } // If a delayed sync is already queued, let it finish instead of stacking
+      // more reflows while the sticky animation is still running.
+
+
+      if (element.sticky.syncRenderedSizeTimeout) {
+        return true;
+      }
+
+      var renderedRect = element.getBoundingClientRect();
+      var widthChanged = Math.abs(renderedRect.width - element.sticky.rect.width) > 0.5;
+      var heightChanged = Math.abs(renderedRect.height - element.sticky.rect.height) > 0.5;
+
+      if (!widthChanged && !heightChanged) {
+        return false;
+      }
+
+      if (element.sticky.isSyncingRenderedSize) {
+        return false;
+      }
+
+      this.scheduleRenderedSizeSync(element);
+      return true;
+    }
+    /**
+     * Schedule one delayed rendered-size sync to let CSS transitions settle.
+     * @function
+     * @param {node} element - Sticky element
+     */
+
+  }, {
+    key: "scheduleRenderedSizeSync",
+    value: function scheduleRenderedSizeSync(element) {
+      var _this9 = this;
+
+      element.sticky.syncRenderedSizeTimeout = window.setTimeout(function () {
+        element.sticky.syncRenderedSizeTimeout = null;
+
+        if (!element.sticky || element.isDisabled) {
+          return;
+        }
+
+        var renderedRect = element.getBoundingClientRect(); // Sticky styles can animate height after the element becomes fixed, so we
+        // re-read the rendered box after a delay and then re-run positioning.
+
+        element.sticky.rect.width = renderedRect.width;
+        element.sticky.rect.height = renderedRect.height;
+        element.sticky.container.rect = _this9.getRectangle(element.sticky.container);
+        element.sticky.hasSyncedStickySize = true;
+        element.sticky.isSyncingRenderedSize = true;
+
+        _this9.setPosition(element);
+
+        element.sticky.isSyncingRenderedSize = false;
+      }, 500);
+    }
+    /**
+     * Clear a pending delayed rendered-size sync.
+     * @function
+     * @param {node} element - Sticky element
+     */
+
+  }, {
+    key: "clearScheduledRenderedSizeSync",
+    value: function clearScheduledRenderedSizeSync(element) {
+      if (!element.sticky || !element.sticky.syncRenderedSizeTimeout) {
+        return;
+      }
+
+      window.clearTimeout(element.sticky.syncRenderedSizeTimeout);
+      element.sticky.syncRenderedSizeTimeout = null;
+    }
     /**
      * Function that returns viewport dimensions
      * @function
@@ -475,6 +634,8 @@ var Sticky = /*#__PURE__*/function () {
     key: "updateScrollTopPosition",
     value: function updateScrollTopPosition() {
       this.scrollTop = (window.pageYOffset || document.scrollTop) - (document.clientTop || 0) || 0;
+      this.scrollDirection = this.scrollTop >= this.previousScrollTop ? 'down' : 'up';
+      this.previousScrollTop = this.scrollTop;
     }
     /**
      * Helper function for loops

package/dist/sticky.min.js

@@ -1 +1 @@
-function _classCallCheck(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function _defineProperties(t,i){for(var e=0;e<i.length;e++){var s=i[e];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}function _createClass(t,i,e){return i&&_defineProperties(t.prototype,i),e&&_defineProperties(t,e),t}var Sticky=function(){function e(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",i=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};_classCallCheck(this,e),this.selector=t,this.elements=[],this.version="1.3.0",this.vp=this.getViewportSize(),this.body=document.querySelector("body"),this.options={wrap:i.wrap||!1,wrapWith:i.wrapWith||"<span></span>",marginTop:i.marginTop||0,marginBottom:i.marginBottom||0,stickyFor:i.stickyFor||0,stickyClass:i.stickyClass||null,stickyContainer:i.stickyContainer||"body"},this.updateScrollTopPosition=this.updateScrollTopPosition.bind(this),this.updateScrollTopPosition(),window.addEventListener("load",this.updateScrollTopPosition),window.addEventListener("scroll",this.updateScrollTopPosition),this.run()}return _createClass(e,[{key:"run",value:function(){var i=this,e=setInterval(function(){var t;"complete"===document.readyState&&(clearInterval(e),t=document.querySelectorAll(i.selector),i.forEach(t,function(t){return i.renderElement(t)}))},10)}},{key:"renderElement",value:function(t){var i=this;t.sticky={},t.sticky.active=!1,t.sticky.marginTop=parseInt(t.getAttribute("data-margin-top"))||this.options.marginTop,t.sticky.marginBottom=parseInt(t.getAttribute("data-margin-bottom"))||this.options.marginBottom,t.sticky.stickyFor=parseInt(t.getAttribute("data-sticky-for"))||this.options.stickyFor,t.sticky.stickyClass=t.getAttribute("data-sticky-class")||this.options.stickyClass,t.sticky.wrap=!!t.hasAttribute("data-sticky-wrap")||this.options.wrap,t.sticky.stickyContainer=this.options.stickyContainer,t.sticky.container=this.getStickyContainer(t),t.sticky.container.rect=this.getRectangle(t.sticky.container),t.sticky.rect=this.getRectangle(t),"img"===t.tagName.toLowerCase()&&(t.onload=function(){return t.sticky.rect=i.getRectangle(t)}),t.sticky.wrap&&this.wrapElement(t),this.activate(t)}},{key:"wrapElement",value:function(t){t.insertAdjacentHTML("beforebegin",t.getAttribute("data-sticky-wrapWith")||this.options.wrapWith),t.previousSibling.appendChild(t)}},{key:"activate",value:function(t){t.sticky.rect.top+t.sticky.rect.height<t.sticky.container.rect.top+t.sticky.container.rect.height&&t.sticky.stickyFor<this.vp.width&&!t.sticky.active&&(t.sticky.active=!0),this.elements.indexOf(t)<0&&this.elements.push(t),t.sticky.resizeEvent||(this.initResizeEvents(t),t.sticky.resizeEvent=!0),t.sticky.scrollEvent||(this.initScrollEvents(t),t.sticky.scrollEvent=!0),this.setPosition(t)}},{key:"initResizeEvents",value:function(t){var i=this;t.sticky.resizeListener=function(){return i.onResizeEvents(t)},window.addEventListener("resize",t.sticky.resizeListener)}},{key:"destroyResizeEvents",value:function(t){window.removeEventListener("resize",t.sticky.resizeListener)}},{key:"onResizeEvents",value:function(t){this.vp=this.getViewportSize(),t.sticky.rect=this.getRectangle(t),t.sticky.container.rect=this.getRectangle(t.sticky.container),t.sticky.rect.top+t.sticky.rect.height<t.sticky.container.rect.top+t.sticky.container.rect.height&&t.sticky.stickyFor<this.vp.width&&!t.sticky.active?t.sticky.active=!0:(t.sticky.rect.top+t.sticky.rect.height>=t.sticky.container.rect.top+t.sticky.container.rect.height||t.sticky.stickyFor>=this.vp.width&&t.sticky.active)&&(t.sticky.active=!1),this.setPosition(t)}},{key:"initScrollEvents",value:function(t){var i=this;t.sticky.scrollListener=function(){return i.onScrollEvents(t)},window.addEventListener("scroll",t.sticky.scrollListener)}},{key:"destroyScrollEvents",value:function(t){window.removeEventListener("scroll",t.sticky.scrollListener)}},{key:"onScrollEvents",value:function(t){t.sticky&&t.sticky.active&&this.setPosition(t)}},{key:"setPosition",value:function(t){t.isDisabled||(this.css(t,{position:"",width:"",top:"",left:""}),this.vp.height<t.sticky.rect.height||!t.sticky.active||(t.sticky.rect.width||(t.sticky.rect=this.getRectangle(t)),t.sticky.wrap&&this.css(t.parentNode,{display:"block",width:t.sticky.rect.width+"px",height:t.sticky.rect.height+"px"}),0===t.sticky.rect.top&&t.sticky.container===this.body?(this.css(t,{position:"fixed",top:t.sticky.rect.top+"px",left:t.sticky.rect.left+"px",width:t.sticky.rect.width+"px"}),t.sticky.stickyClass&&t.classList.add(t.sticky.stickyClass)):this.scrollTop>t.sticky.rect.top-t.sticky.marginTop?(this.css(t,{position:"fixed",width:t.sticky.rect.width+"px",left:t.sticky.rect.left+"px"}),this.scrollTop+t.sticky.rect.height+t.sticky.marginTop>t.sticky.container.rect.top+t.sticky.container.offsetHeight-t.sticky.marginBottom?(t.sticky.stickyClass&&t.classList.remove(t.sticky.stickyClass),this.css(t,{top:t.sticky.container.rect.top+t.sticky.container.offsetHeight-(this.scrollTop+t.sticky.rect.height+t.sticky.marginBottom)+"px"})):(t.sticky.stickyClass&&t.classList.add(t.sticky.stickyClass),this.css(t,{top:t.sticky.marginTop+"px"}))):(t.sticky.stickyClass&&t.classList.remove(t.sticky.stickyClass),this.css(t,{position:"",width:"",top:"",left:""}),t.sticky.wrap&&this.css(t.parentNode,{display:"",width:"",height:""}))))}},{key:"update",value:function(){var i=this;this.forEach(this.elements,function(t){t.sticky.rect=i.getRectangle(t),t.sticky.container.rect=i.getRectangle(t.sticky.container),i.activate(t),i.setPosition(t)})}},{key:"destroy",value:function(){var i=this;window.removeEventListener("load",this.updateScrollTopPosition),window.removeEventListener("scroll",this.updateScrollTopPosition),this.forEach(this.elements,function(t){i.destroyResizeEvents(t),i.destroyScrollEvents(t),delete t.sticky})}},{key:"enable",value:function(){var i=this;this.forEach(this.elements,function(t){t.isDisabled=!1,i.setPosition(t)})}},{key:"disable",value:function(){var i=this;this.forEach(this.elements,function(t){t.isDisabled=!0,i.css(t,{position:"",width:"",top:"",left:""})})}},{key:"getStickyContainer",value:function(t){for(var i=t.parentNode;!i.hasAttribute("data-sticky-container")&&!i.parentNode.querySelector(t.sticky.stickyContainer)&&i!==this.body;)i=i.parentNode;return i}},{key:"getRectangle",value:function(t){this.css(t,{position:"",width:"",top:"",left:""});for(var i=Math.max(t.offsetWidth,t.clientWidth,t.scrollWidth),e=Math.max(t.offsetHeight,t.clientHeight,t.scrollHeight),s=0,n=0;s+=t.offsetTop||0,n+=t.offsetLeft||0,t=t.offsetParent;);return{top:s,left:n,width:i,height:e}}},{key:"getViewportSize",value:function(){return{width:Math.max(document.documentElement.clientWidth,window.innerWidth||0),height:Math.max(document.documentElement.clientHeight,window.innerHeight||0)}}},{key:"updateScrollTopPosition",value:function(){this.scrollTop=(window.pageYOffset||document.scrollTop)-(document.clientTop||0)||0}},{key:"forEach",value:function(t,i){for(var e=0,s=t.length;e<s;e++)i(t[e])}},{key:"css",value:function(t,i){for(var e in i)i.hasOwnProperty(e)&&(t.style[e]=i[e])}}]),e}();!function(t,i){"undefined"!=typeof exports?module.exports=i:"function"==typeof define&&define.amd?define([],function(){return i}):t.Sticky=i}(this,Sticky);
+function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function _defineProperties(t,e){for(var i=0;i<e.length;i++){var s=e[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}function _createClass(t,e,i){return e&&_defineProperties(t.prototype,e),i&&_defineProperties(t,i),t}var Sticky=function(){function i(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};_classCallCheck(this,i),this.selector=t,this.elements=[],this.version="1.3.0",this.vp=this.getViewportSize(),this.body=document.querySelector("body"),this.options={wrap:e.wrap||!1,wrapWith:e.wrapWith||"<span></span>",marginTop:e.marginTop||0,marginBottom:e.marginBottom||0,stickyFor:e.stickyFor||0,stickyClass:e.stickyClass||null,stickyContainer:e.stickyContainer||"body"},this.updateScrollTopPosition=this.updateScrollTopPosition.bind(this),this.scrollDirection="down",this.previousScrollTop=0,this.updateScrollTopPosition(),window.addEventListener("load",this.updateScrollTopPosition),window.addEventListener("scroll",this.updateScrollTopPosition),this.run()}return _createClass(i,[{key:"run",value:function(){var e=this,i=setInterval(function(){if("complete"===document.readyState){clearInterval(i);var t=document.querySelectorAll(e.selector);e.forEach(t,function(t){return e.renderElement(t)})}},10)}},{key:"renderElement",value:function(t){var e=this;t.sticky={},t.sticky.active=!1,t.sticky.hasSyncedStickySize=!1,t.sticky.bottomLocked=!1,t.sticky.syncRenderedSizeTimeout=null,t.sticky.marginTop=parseInt(t.getAttribute("data-margin-top"))||this.options.marginTop,t.sticky.marginBottom=parseInt(t.getAttribute("data-margin-bottom"))||this.options.marginBottom,t.sticky.stickyFor=parseInt(t.getAttribute("data-sticky-for"))||this.options.stickyFor,t.sticky.stickyClass=t.getAttribute("data-sticky-class")||this.options.stickyClass,t.sticky.wrap=!!t.hasAttribute("data-sticky-wrap")||this.options.wrap,t.sticky.stickyContainer=this.options.stickyContainer,t.sticky.container=this.getStickyContainer(t),t.sticky.container.rect=this.getRectangle(t.sticky.container),t.sticky.rect=this.getRectangle(t),"img"===t.tagName.toLowerCase()&&(t.onload=function(){t.sticky.rect=e.getRectangle(t),e.updateElementRenderedSize(t)}),t.sticky.wrap&&this.wrapElement(t),this.activate(t)}},{key:"wrapElement",value:function(t){t.insertAdjacentHTML("beforebegin",t.getAttribute("data-sticky-wrapWith")||this.options.wrapWith),t.previousSibling.appendChild(t)}},{key:"activate",value:function(t){t.sticky.rect.top+t.sticky.rect.height<t.sticky.container.rect.top+t.sticky.container.rect.height&&t.sticky.stickyFor<this.vp.width&&!t.sticky.active&&(t.sticky.active=!0),this.elements.indexOf(t)<0&&this.elements.push(t),t.sticky.resizeEvent||(this.initResizeEvents(t),t.sticky.resizeEvent=!0),t.sticky.scrollEvent||(this.initScrollEvents(t),t.sticky.scrollEvent=!0),this.setPosition(t)}},{key:"initResizeEvents",value:function(t){var e=this;t.sticky.resizeListener=function(){return e.onResizeEvents(t)},window.addEventListener("resize",t.sticky.resizeListener)}},{key:"destroyResizeEvents",value:function(t){window.removeEventListener("resize",t.sticky.resizeListener)}},{key:"onResizeEvents",value:function(t){this.vp=this.getViewportSize(),this.updateElementRenderedSize(t),t.sticky.container.rect=this.getRectangle(t.sticky.container),t.sticky.rect.top+t.sticky.rect.height<t.sticky.container.rect.top+t.sticky.container.rect.height&&t.sticky.stickyFor<this.vp.width&&!t.sticky.active?t.sticky.active=!0:(t.sticky.rect.top+t.sticky.rect.height>=t.sticky.container.rect.top+t.sticky.container.rect.height||t.sticky.stickyFor>=this.vp.width&&t.sticky.active)&&(t.sticky.active=!1),this.setPosition(t)}},{key:"initScrollEvents",value:function(t){var e=this;t.sticky.scrollListener=function(){return e.onScrollEvents(t)},window.addEventListener("scroll",t.sticky.scrollListener)}},{key:"destroyScrollEvents",value:function(t){window.removeEventListener("scroll",t.sticky.scrollListener)}},{key:"onScrollEvents",value:function(t){t.sticky&&t.sticky.active&&this.setPosition(t)}},{key:"setPosition",value:function(t){if(!t.isDisabled&&(this.css(t,{position:"",width:"",top:"",left:""}),!(this.vp.height<t.sticky.rect.height)&&t.sticky.active))if(t.sticky.rect.width||(t.sticky.rect=this.getRectangle(t)),t.sticky.wrap&&this.css(t.parentNode,{display:"block",width:t.sticky.rect.width+"px",height:t.sticky.rect.height+"px"}),0===t.sticky.rect.top&&t.sticky.container===this.body){if(this.css(t,{position:"fixed",top:t.sticky.rect.top+"px",left:t.sticky.rect.left+"px",width:t.sticky.rect.width+"px"}),t.sticky.stickyClass&&t.classList.add(t.sticky.stickyClass),t.sticky.bottomLocked=!1,this.syncRenderedSize(t))return}else if(this.scrollTop>t.sticky.rect.top-t.sticky.marginTop){if(t.sticky.bottomLocked&&"up"!==this.scrollDirection)return this.updateElementRenderedSize(t),this.css(t,{position:"fixed",width:t.sticky.rect.width+"px",left:t.sticky.rect.left+"px",top:t.sticky.container.rect.top+t.sticky.container.offsetHeight-(this.scrollTop+t.sticky.rect.height+t.sticky.marginBottom)+"px"}),void(t.sticky.stickyClass&&t.classList.remove(t.sticky.stickyClass));if(this.css(t,{position:"fixed",width:t.sticky.rect.width+"px",left:t.sticky.rect.left+"px"}),this.scrollTop+t.sticky.rect.height+t.sticky.marginTop>t.sticky.container.rect.top+t.sticky.container.offsetHeight-t.sticky.marginBottom){if(t.sticky.bottomLocked=!0,this.updateElementRenderedSize(t),t.sticky.stickyClass&&t.classList.remove(t.sticky.stickyClass),this.css(t,{top:t.sticky.container.rect.top+t.sticky.container.offsetHeight-(this.scrollTop+t.sticky.rect.height+t.sticky.marginBottom)+"px"}),this.syncRenderedSize(t))return}else if("up"===this.scrollDirection&&(t.sticky.bottomLocked=!1),t.sticky.stickyClass&&t.classList.add(t.sticky.stickyClass),this.css(t,{top:t.sticky.marginTop+"px"}),this.syncRenderedSize(t))return}else t.sticky.hasSyncedStickySize=!1,t.sticky.bottomLocked=!1,this.clearScheduledRenderedSizeSync(t),t.sticky.stickyClass&&t.classList.remove(t.sticky.stickyClass),this.css(t,{position:"",width:"",top:"",left:""}),t.sticky.wrap&&this.css(t.parentNode,{display:"",width:"",height:""})}},{key:"update",value:function(){var e=this;this.forEach(this.elements,function(t){e.updateElementRenderedSize(t),t.sticky.container.rect=e.getRectangle(t.sticky.container),e.activate(t),e.setPosition(t)})}},{key:"destroy",value:function(){var e=this;window.removeEventListener("load",this.updateScrollTopPosition),window.removeEventListener("scroll",this.updateScrollTopPosition),this.forEach(this.elements,function(t){e.clearScheduledRenderedSizeSync(t),e.destroyResizeEvents(t),e.destroyScrollEvents(t),delete t.sticky})}},{key:"enable",value:function(){var e=this;this.forEach(this.elements,function(t){t.isDisabled=!1,e.setPosition(t)})}},{key:"disable",value:function(){var e=this;this.forEach(this.elements,function(t){t.isDisabled=!0,e.css(t,{position:"",width:"",top:"",left:""})})}},{key:"getStickyContainer",value:function(t){for(var e=t.parentNode;!e.hasAttribute("data-sticky-container")&&!e.parentNode.querySelector(t.sticky.stickyContainer)&&e!==this.body;)e=e.parentNode;return e}},{key:"getRectangle",value:function(t){this.css(t,{position:"",width:"",top:"",left:""});for(var e=Math.max(t.offsetWidth,t.clientWidth,t.scrollWidth),i=Math.max(t.offsetHeight,t.clientHeight,t.scrollHeight),s=0,c=0;s+=t.offsetTop||0,c+=t.offsetLeft||0,t=t.offsetParent;);return{top:s,left:c,width:e,height:i}}},{key:"updateElementRenderedSize",value:function(t){var e=t.getBoundingClientRect();t.sticky.rect||(t.sticky.rect=this.getRectangle(t)),t.sticky.rect.width=e.width,t.sticky.rect.height=e.height}},{key:"syncRenderedSize",value:function(t){if(t.sticky.hasSyncedStickySize)return!1;if(t.sticky.syncRenderedSizeTimeout)return!0;var e=t.getBoundingClientRect(),i=.5<Math.abs(e.width-t.sticky.rect.width),s=.5<Math.abs(e.height-t.sticky.rect.height);return(i||s)&&(!t.sticky.isSyncingRenderedSize&&(this.scheduleRenderedSizeSync(t),!0))}},{key:"scheduleRenderedSizeSync",value:function(e){var i=this;e.sticky.syncRenderedSizeTimeout=window.setTimeout(function(){if(e.sticky.syncRenderedSizeTimeout=null,e.sticky&&!e.isDisabled){var t=e.getBoundingClientRect();e.sticky.rect.width=t.width,e.sticky.rect.height=t.height,e.sticky.container.rect=i.getRectangle(e.sticky.container),e.sticky.hasSyncedStickySize=!0,e.sticky.isSyncingRenderedSize=!0,i.setPosition(e),e.sticky.isSyncingRenderedSize=!1}},500)}},{key:"clearScheduledRenderedSizeSync",value:function(t){t.sticky&&t.sticky.syncRenderedSizeTimeout&&(window.clearTimeout(t.sticky.syncRenderedSizeTimeout),t.sticky.syncRenderedSizeTimeout=null)}},{key:"getViewportSize",value:function(){return{width:Math.max(document.documentElement.clientWidth,window.innerWidth||0),height:Math.max(document.documentElement.clientHeight,window.innerHeight||0)}}},{key:"updateScrollTopPosition",value:function(){this.scrollTop=(window.pageYOffset||document.scrollTop)-(document.clientTop||0)||0,this.scrollDirection=this.scrollTop>=this.previousScrollTop?"down":"up",this.previousScrollTop=this.scrollTop}},{key:"forEach",value:function(t,e){for(var i=0,s=t.length;i<s;i++)e(t[i])}},{key:"css",value:function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t.style[i]=e[i])}}]),i}();!function(t,e){"undefined"!=typeof exports?module.exports=e:"function"==typeof define&&define.amd?define([],function(){return e}):t.Sticky=e}(this,Sticky);

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@traveledmap/sticky-js",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Sticky elements",
   "main": "index.js",
   "publishConfig": {
     "access": "public"
   },
+  "overrides": {
+    "make-error-cause": "1.2.2"
+  },
   "scripts": {
     "start": "gulp",
     "build": "gulp build",
@@ -22,7 +25,7 @@
     "scroll",
     "javascript"
   ],
-  "author": "rgalus <biuro@rafalgalus.pl>",
+  "author": "qlerebours <quentin@qlerebours.dev>",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/TraveledMap/sticky-js/issues"

package/src/sticky.js

@@ -37,6 +37,8 @@ class Sticky {
     };
 
     this.updateScrollTopPosition = this.updateScrollTopPosition.bind(this);
+    this.scrollDirection = 'down';
+    this.previousScrollTop = 0;
 
     this.updateScrollTopPosition();
     window.addEventListener('load', this.updateScrollTopPosition);
@@ -74,6 +76,10 @@ class Sticky {
 
     // set default variables
     element.sticky.active = false;
+    // Keep track of temporary state used when sticky styles animate element size.
+    element.sticky.hasSyncedStickySize = false;
+    element.sticky.bottomLocked = false;
+    element.sticky.syncRenderedSizeTimeout = null;
 
     element.sticky.marginTop = parseInt(element.getAttribute('data-margin-top')) || this.options.marginTop;
     element.sticky.marginBottom = parseInt(element.getAttribute('data-margin-bottom')) || this.options.marginBottom;
@@ -91,7 +97,10 @@ class Sticky {
 
     // fix when element is image that has not yet loaded and width, height = 0
     if (element.tagName.toLowerCase() === 'img') {
-      element.onload = () => element.sticky.rect = this.getRectangle(element);
+      element.onload = () => {
+        element.sticky.rect = this.getRectangle(element);
+        this.updateElementRenderedSize(element);
+      };
     }
 
     if (element.sticky.wrap) {
@@ -175,7 +184,7 @@ class Sticky {
    onResizeEvents(element) {
     this.vp = this.getViewportSize();
 
-    element.sticky.rect = this.getRectangle(element);
+    this.updateElementRenderedSize(element);
     element.sticky.container.rect = this.getRectangle(element.sticky.container);
 
     if (
@@ -269,7 +278,31 @@ class Sticky {
       if (element.sticky.stickyClass) {
         element.classList.add(element.sticky.stickyClass);
       }
+      element.sticky.bottomLocked = false;
+      if (this.syncRenderedSize(element)) {
+        return;
+      }
     } else if (this.scrollTop > (element.sticky.rect.top - element.sticky.marginTop)) {
+      // Once we reached the container bottom while scrolling down, keep the
+      // element in the clamped state until the user scrolls back up.
+      if (element.sticky.bottomLocked && this.scrollDirection !== 'up') {
+        this.updateElementRenderedSize(element);
+
+        this.css(element, {
+          position: 'fixed',
+          width: element.sticky.rect.width + 'px',
+          left: element.sticky.rect.left + 'px',
+          top: (element.sticky.container.rect.top + element.sticky.container.offsetHeight)
+            - (this.scrollTop + element.sticky.rect.height + element.sticky.marginBottom) + 'px',
+        });
+
+        if (element.sticky.stickyClass) {
+          element.classList.remove(element.sticky.stickyClass);
+        }
+
+        return;
+      }
+
       this.css(element, {
         position: 'fixed',
         width: element.sticky.rect.width + 'px',
@@ -280,6 +313,8 @@ class Sticky {
         (this.scrollTop + element.sticky.rect.height + element.sticky.marginTop)
         > (element.sticky.container.rect.top + element.sticky.container.offsetHeight - element.sticky.marginBottom)
       ) {
+        element.sticky.bottomLocked = true;
+        this.updateElementRenderedSize(element);
 
         if (element.sticky.stickyClass) {
           element.classList.remove(element.sticky.stickyClass);
@@ -288,14 +323,28 @@ class Sticky {
         this.css(element, {
           top: (element.sticky.container.rect.top + element.sticky.container.offsetHeight) - (this.scrollTop + element.sticky.rect.height + element.sticky.marginBottom) + 'px' }
         );
+        if (this.syncRenderedSize(element)) {
+          return;
+        }
       } else {
+        if (this.scrollDirection === 'up') {
+          element.sticky.bottomLocked = false;
+        }
+
         if (element.sticky.stickyClass) {
           element.classList.add(element.sticky.stickyClass);
         }
 
         this.css(element, { top: element.sticky.marginTop + 'px' });
+        if (this.syncRenderedSize(element)) {
+          return;
+        }
       }
     } else {
+      element.sticky.hasSyncedStickySize = false;
+      element.sticky.bottomLocked = false;
+      this.clearScheduledRenderedSizeSync(element);
+
       if (element.sticky.stickyClass) {
         element.classList.remove(element.sticky.stickyClass);
       }
@@ -315,7 +364,7 @@ class Sticky {
    */
    update() {
     this.forEach(this.elements, (element) => {
-      element.sticky.rect = this.getRectangle(element);
+      this.updateElementRenderedSize(element);
       element.sticky.container.rect = this.getRectangle(element.sticky.container);
 
       this.activate(element);
@@ -333,6 +382,7 @@ class Sticky {
     window.removeEventListener('scroll', this.updateScrollTopPosition);
 
     this.forEach(this.elements, (element) => {
+      this.clearScheduledRenderedSizeSync(element);
       this.destroyResizeEvents(element);
       this.destroyScrollEvents(element);
       delete element.sticky;
@@ -400,6 +450,103 @@ class Sticky {
   }
 
 
+  /**
+   * Updates only the rendered width/height of a sticky element without resetting
+   * its stored document position. This keeps the original sticky trigger point
+   * while allowing update() to pick up size changes caused by sticky classes.
+   * @function
+   * @param {node} element - Sticky element
+   */
+  updateElementRenderedSize(element) {
+    const renderedRect = element.getBoundingClientRect();
+
+    if (!element.sticky.rect) {
+      element.sticky.rect = this.getRectangle(element);
+    }
+
+    element.sticky.rect.width = renderedRect.width;
+    element.sticky.rect.height = renderedRect.height;
+  }
+
+
+  /**
+   * Sync rendered size back into sticky measurements and rerun positioning once
+   * after sticky styles had time to animate their dimensions.
+   * @function
+   * @param {node} element - Sticky element
+   * @param {string} reason - Debug reason
+   * @return {boolean}
+   */
+  syncRenderedSize(element) {
+    if (element.sticky.hasSyncedStickySize) {
+      return false;
+    }
+
+    // If a delayed sync is already queued, let it finish instead of stacking
+    // more reflows while the sticky animation is still running.
+    if (element.sticky.syncRenderedSizeTimeout) {
+      return true;
+    }
+
+    const renderedRect = element.getBoundingClientRect();
+    const widthChanged = Math.abs(renderedRect.width - element.sticky.rect.width) > 0.5;
+    const heightChanged = Math.abs(renderedRect.height - element.sticky.rect.height) > 0.5;
+
+    if (!widthChanged && !heightChanged) {
+      return false;
+    }
+
+    if (element.sticky.isSyncingRenderedSize) {
+      return false;
+    }
+
+    this.scheduleRenderedSizeSync(element);
+    return true;
+  }
+
+
+  /**
+   * Schedule one delayed rendered-size sync to let CSS transitions settle.
+   * @function
+   * @param {node} element - Sticky element
+   */
+  scheduleRenderedSizeSync(element) {
+    element.sticky.syncRenderedSizeTimeout = window.setTimeout(() => {
+      element.sticky.syncRenderedSizeTimeout = null;
+
+      if (!element.sticky || element.isDisabled) {
+        return;
+      }
+
+      const renderedRect = element.getBoundingClientRect();
+
+      // Sticky styles can animate height after the element becomes fixed, so we
+      // re-read the rendered box after a delay and then re-run positioning.
+      element.sticky.rect.width = renderedRect.width;
+      element.sticky.rect.height = renderedRect.height;
+      element.sticky.container.rect = this.getRectangle(element.sticky.container);
+      element.sticky.hasSyncedStickySize = true;
+
+      element.sticky.isSyncingRenderedSize = true;
+      this.setPosition(element);
+      element.sticky.isSyncingRenderedSize = false;
+    }, 500);
+  }
+
+
+  /**
+   * Clear a pending delayed rendered-size sync.
+   * @function
+   * @param {node} element - Sticky element
+   */
+  clearScheduledRenderedSizeSync(element) {
+    if (!element.sticky || !element.sticky.syncRenderedSizeTimeout) {
+      return;
+    }
+
+    window.clearTimeout(element.sticky.syncRenderedSizeTimeout);
+    element.sticky.syncRenderedSizeTimeout = null;
+  }
   /**
    * Function that returns viewport dimensions
    * @function
@@ -420,6 +567,8 @@ class Sticky {
    */
   updateScrollTopPosition() {
     this.scrollTop = (window.pageYOffset || document.scrollTop)  - (document.clientTop || 0) || 0;
+    this.scrollDirection = this.scrollTop >= this.previousScrollTop ? 'down' : 'up';
+    this.previousScrollTop = this.scrollTop;
   }
 
 

package/.idea/checkstyle-idea.xml

@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="CheckStyle-IDEA">
-    <option name="configuration">
-      <map>
-        <entry key="checkstyle-version" value="8.43" />
-        <entry key="copy-libs" value="false" />
-        <entry key="location-0" value="BUNDLED:(bundled):Sun Checks" />
-        <entry key="location-1" value="BUNDLED:(bundled):Google Checks" />
-        <entry key="scan-before-checkin" value="false" />
-        <entry key="scanscope" value="JavaOnly" />
-        <entry key="suppress-errors" value="false" />
-      </map>
-    </option>
-  </component>
-</project>

package/.idea/sonarlint/issuestore/index.pb

@@ -1,3 +0,0 @@
-
-F
-dist/sticky.compile.js,6/c/6c820c805f8673775cb16a38d8ca45931f445875