add support state classes for parent element yowainwright#187

src/stickybits.js

@@ -291,8 +291,11 @@ class Stickybits {
     const pv = p.positionVal
     const se = p.scrollEl
     const sticky = p.stickyClass
+    const stickyParent = p.stickyParentClass
     const stickyChange = p.stickyChangeClass
+    const stickyChangeParent = p.stickyChangeParentClass
     const stuck = p.stuckClass
+    const stuckParent = p.stuckParentClass
     const vp = p.verticalPosition
     const isTop = vp !== 'bottom'
     const aS = p.applyStyle
@@ -350,7 +353,8 @@ class Stickybits {
     // Only apply new styles if the state has changed
     if (state === it.state && stateChange === it.stateChange) return
     rAF(() => {
-      const stateStyles = {
+      const stateStyle = { };
+      stateStyle.element = {
         sticky: {
           styles: {
             position: pv,
@@ -382,19 +386,37 @@ class Stickybits {
           classes: { [stuck]: true },
         },
       }
+      stateStyle.parent = {
+        sticky: {
+          classes: { [stickyParent]: true }
+        },
+        default: {
+          classes: { }
+        },
+        stuck: {
+          classes: { [stuckParent]: true }
+        }
+      }
 
       if (pv === 'fixed') {
-        stateStyles.default.styles.position = ''
+        stateStyles.element.default.styles.position = ''
       }
 
-      const style = stateStyles[it.state]
+      const style = stateStyles.element[it.state]
+      const styleParent = stateStyles.parent[it.state]
       style.classes = {
         [stuck]: !!style.classes[stuck],
         [sticky]: !!style.classes[sticky],
         [stickyChange]: isStickyChange,
       }
+      styleParent.classes = {
+        [stuckParent]: !!styleParent.classes[stuckParent],
+        [stickyParent]: !!styleParent.classes[stickyParent],
+        [stickyChangeParent]: isStickyChange,
+      }
 
       aS(style, item)
+      aS(styleParent, { el: item.el.parentElement })
     })
   }