The following is a small check I used to see if the top of one item overlaps the bottom of another. This can be modified to suit many different needs. Let’s go to the code.
doesOverlap($topElem, $bottomElem) {
// get the top of the lower element in the document flows position
var bottomElemPos = $bottomElem.getBoundingClientRect().top + window.scrollY;
// get the top position of the higher element in the document flow
var topElemTop = $topElem.getBoundingClientRect().top + window.scrollY;
// get the bottom position of the higher element in the document flow
var topElemBottom = topElemTop + $topElem.getBoundingClientRect().height;
// check if the position of the lower element overlaps any point of the higher element
return bottomElemPos < topElemBottom && bottomElemPos < topElemTop;
}