// 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);