Add Mutation Observers to Sticky

Sticky is receiving a mutation observer. Sticky can now listen to
elements within its DOM scope for mutation changes. This will allow the
sticky element, and it’s anchor container (if applicable) to receive a
notification if any element is changed within it’s respective space
calling setSizes() and calc() in the same manor as a resize would.

diff --git a/js/foundation.sticky.js b/js/foundation.sticky.js
index 7c5bf762d4d05db2e09a5803252fa0caf7861621..0a17602a5a431dc657b43df93bffa58cbbb599db 100644 (file)
--- a/js/foundation.sticky.js
+++ b/js/foundation.sticky.js
@@ -41,8 +41,10 @@ class Sticky {
     this.$container = $parent.length ? $parent : $(this.options.container).wrapInner(this.$element);
     this.$container.addClass(this.options.containerClass);
 
-    this.$element.addClass(this.options.stickyClass)
-                 .attr({'data-resize': id});
+    this.$element.addClass(this.options.stickyClass).attr({ 'data-resize': id, 'data-mutate': id });
+       if (this.options.anchor !== '') {
+               $('#' + _this.options.anchor).attr({ 'data-mutate': id });
+       }
 
     this.scrollCount = this.options.checkEvery;
     this.isStuck = false;
@@ -138,6 +140,32 @@ class Sticky {
                        }
                      });
     });
+       
+       this.$element.on('mutateme.zf.trigger', function (e, el, ms, mr) {
+               _this._setSizes(function () {
+                       _this._calc(false);
+                       if (_this.canStick) {
+                         if (!_this.isOn) {
+                               _this._events(id);
+                         }
+                       } else if (_this.isOn) {
+                         _this._pauseListeners(scrollListener);
+                       }
+         });
+       });
+       
+       this.$anchor.on('mutateme.zf.trigger', function (e, el, ms, mr) {
+               _this._setSizes(function () {
+                       _this._calc(false);
+                       if (_this.canStick) {
+                         if (!_this.isOn) {
+                               _this._events(id);
+                         }
+                       } else if (_this.isOn) {
+                         _this._pauseListeners(scrollListener);
+                       }
+               });
+       });
   }
 
   /**
@@ -362,7 +390,8 @@ class Sticky {
                    bottom: '',
                    'max-width': ''
                  })
-                 .off('resizeme.zf.trigger');
+                 .off('resizeme.zf.trigger')
+                                .off('mutateme.zf.trigger');
     if (this.$anchor && this.$anchor.length) {
       this.$anchor.off('change.zf.sticky');
     }