gkielwasser · March 20, 2021 20:07 · Jun 6, 2019 · Jun 6, 2019 · Jun 6, 2019 · Jun 6, 2019
diff --git a/findOverflowParents.js b/findOverflowParents.js
@@ -1,6 +1,10 @@
 // when you're trying to use `position:sticky` on an element
 // you'll have trouble if any parent/ancestor element has 
 // overflow set to anything other than "visible" (such as: auto,hidden,overlay,scroll)
+// & turns out if a parent is `display:flex` it might need some love 
+// (to remedy this you can set the `align-self` of your sticky element)
+// see here for how the display & align-self properties affect: http://bit.ly/2ZaRu4o
+
 // so, to find those troublesome parents...
 // copy & paste this into Chrome Inspector/Dev Tools console
 // (and be sure to change the #stickyElement below, if needed)
@@ -12,10 +16,16 @@ function findOverflowParents(element, initEl) {
     return overflow !== "visible";
   }
 
+  function displayFlex(el) {
+    let display = getComputedStyle(el).display;
+    return display === "flex";
+  }
+
   let thisEl = element;
   if (!initEl) console.log('** Overflow check commence!', thisEl);
   let origEl = initEl || thisEl;
-  if (notVisible(thisEl)) console.warn("Overflow found on:", thisEl.tagName, '#' + thisEl.id, '.' + thisEl.className, thisEl);
+  if (notVisible(thisEl)) console.warn("Overflow found on:", thisEl.tagName, { issue: "OVERFLOW IS NOT VISIBLE", tagName: thisEl.tagName, id: thisEl.id, class: thisEl.className, element: thisEl });
+  if (displayFlex(thisEl)) console.warn("Flex found on:", thisEl.tagName, { issue: "DISPLAY IS FLEX", tagName: thisEl.tagName, id: thisEl.id, class: thisEl.className, element: thisEl });
   if (thisEl.parentElement) {
     return findOverflowParents(thisEl.parentElement, origEl);
   } else {
@@ -33,6 +43,8 @@ findOverflowParents($0);
 
 
 
+
+
 // *more learnings...
 // both `overflow-x` & `overflow-y` must === "visible" else sticky won't stick
 // for each of the possible settings of `overflow`, this is how they compute

diff --git a/findOverflowParents.js b/findOverflowParents.js
@@ -13,12 +13,13 @@ function findOverflowParents(element, initEl) {
   }
 
   let thisEl = element;
+  if (!initEl) console.log('** Overflow check commence!', thisEl);
   let origEl = initEl || thisEl;
   if (notVisible(thisEl)) console.warn("Overflow found on:", thisEl.tagName, '#' + thisEl.id, '.' + thisEl.className, thisEl);
   if (thisEl.parentElement) {
     return findOverflowParents(thisEl.parentElement, origEl);
   } else {
-    return console.info('Overflow ancestor check complete! original element:', origEl);
+    return console.log('** Overflow check complete! original element:', origEl);
   }
 
 }

diff --git a/findOverflowParents.js b/findOverflowParents.js
@@ -9,7 +9,7 @@ function findOverflowParents(element, initEl) {
 
   function notVisible(el) {
     let overflow = getComputedStyle(el).overflow;
-    return overflow !== = "visible";
+    return overflow !== "visible";
   }
 
   let thisEl = element;
@@ -31,6 +31,7 @@ findOverflowParents($0);
 
 
 
+
 // *more learnings...
 // both `overflow-x` & `overflow-y` must === "visible" else sticky won't stick
 // for each of the possible settings of `overflow`, this is how they compute

diff --git a/findOverflowParents.js b/findOverflowParents.js
@@ -1,19 +1,20 @@
 // when you're trying to use `position:sticky` on an element
-// you'll have trouble if any parent element has an overflow of "hidden"
+// you'll have trouble if any parent/ancestor element has 
+// overflow set to anything other than "visible" (such as: auto,hidden,overlay,scroll)
 // so, to find those troublesome parents...
 // copy & paste this into Chrome Inspector/Dev Tools console
 // (and be sure to change the #stickyElement below, if needed)
 
 function findOverflowParents(element, initEl) {
 
-  function hasOverflow(el) {
+  function notVisible(el) {
     let overflow = getComputedStyle(el).overflow;
-    return overflow.indexOf("hidden") > -1;
+    return overflow !== = "visible";
   }
 
   let thisEl = element;
   let origEl = initEl || thisEl;
-  if (hasOverflow(thisEl)) console.warn("Overflow found on:", thisEl.tagName, '#' + thisEl.id, '.' + thisEl.className, thisEl);
+  if (notVisible(thisEl)) console.warn("Overflow found on:", thisEl.tagName, '#' + thisEl.id, '.' + thisEl.className, thisEl);
   if (thisEl.parentElement) {
     return findOverflowParents(thisEl.parentElement, origEl);
   } else {
@@ -26,4 +27,19 @@ function findOverflowParents(element, initEl) {
 // findOverflowParents(document.querySelector('#stickyElement'));
 
 // or use $0 for the last element selected in the Chrome Inspector
-findOverflowParents($0);
+findOverflowParents($0);
+
+
+
+// *more learnings...
+// both `overflow-x` & `overflow-y` must === "visible" else sticky won't stick
+// for each of the possible settings of `overflow`, this is how they compute
+// (if "unset" is declared the getComputedStyle === "visible")
+// "auto" computes to "auto" *nosticky
+// "hidden" computes to "hidden" *nosticky
+// "inherit" computes to "visible"
+// "initial" computes to "visible"
+// "overlay" computes to "overlay" *nosticky
+// "scroll" computes to "scroll" *nosticky
+// "unset" computes to "visible"
+// "visible" computes to "visible"
diff --git a/findOverflowParents.js b/findOverflowParents.js
@@ -0,0 +1,29 @@
+// when you're trying to use `position:sticky` on an element
+// you'll have trouble if any parent element has an overflow of "hidden"
+// so, to find those troublesome parents...
+// copy & paste this into Chrome Inspector/Dev Tools console
+// (and be sure to change the #stickyElement below, if needed)
+
+function findOverflowParents(element, initEl) {
+
+  function hasOverflow(el) {
+    let overflow = getComputedStyle(el).overflow;
+    return overflow.indexOf("hidden") > -1;
+  }
+
+  let thisEl = element;
+  let origEl = initEl || thisEl;
+  if (hasOverflow(thisEl)) console.warn("Overflow found on:", thisEl.tagName, '#' + thisEl.id, '.' + thisEl.className, thisEl);
+  if (thisEl.parentElement) {
+    return findOverflowParents(thisEl.parentElement, origEl);
+  } else {
+    return console.info('Overflow ancestor check complete! original element:', origEl);
+  }
+
+}
+
+// to use a selector, change `#stickyElement` to your desired selector
+// findOverflowParents(document.querySelector('#stickyElement'));
+
+// or use $0 for the last element selected in the Chrome Inspector
+findOverflowParents($0);