두 div가 겹치는 지 확인하는 방법은 무엇입니까?

Question

내 div 중 두 개가 겹치는 지 감지하려고합니다. div를 확장하고 buttonclick으로 축소 할 수있는 텍스트 블록을 포함하는 div가 있습니다. Underneth는 스크롤 목록으로 돌아올 특정 지점까지 "사물"로 채워질 또 다른 div입니다. 이제 까다로운 부분으로.

태블릿 7 "에 (I 변경 캔트) 최대로 채워지는 목록까지 잘이 업무 나. 내가 캔트

그래서 스피 두 div의이 겹치는 경우 감지 할 수있는 방법을 작성하려고. ,, mabey 임 옳은 일에서 검색되지 아무도 또는 mabey이없는 내가 도움이 필요 하나 방법이 어디를위한 좋은 해결책을 찾기

를이 내가 지금까지 시도한 것입니다.

 crashDetection(event, pageInfoBlock) { 
      let helBlockTop = parseInt(document.getElementById('page-info').getBoundingClientRect().bottom, 10); 
      let helBlockBottom = parseInt(document.getElementById('page-info').getBoundingClientRect().height, 10); 
      let containerBottom = parseInt(document.getElementById('bottomContainer').getBoundingClientRect().top, 10); 

      if (helBlockTop + helBlockBottom > containerBottom && containerBottom !== 0) { 
console.log("It overlap"); 
      } 
     } 

이 작품을 .. 거의 어떤 상황에서는 wh 엉덩이 나는 모든 것을 포함하는 div를 아래로 스크롤하여 스트레치 아웃을 얻으므로 좋을 것 같습니다. 그러나 맨 위로 다시 스크롤하면 .. 그리고 아무런 반응이 없는데도 내 방법으로 겹쳐지는 것을 감지합니다 ..

그래서 내 질문 두 div가 겹치는 경우 어떻게 감지합니까? 내 나쁜 영어에 대한 없음 JQuery와주십시오 미안 .. : P

Answer 1

function collision($div1, $div2) { 
      var x1 = $div1.offset().left; 
      var y1 = $div1.offset().top; 
      var h1 = $div1.outerHeight(true); 
      var w1 = $div1.outerWidth(true); 
      var b1 = y1 + h1; 
      var r1 = x1 + w1; 
      var x2 = $div2.offset().left; 
      var y2 = $div2.offset().top; 
      var h2 = $div2.outerHeight(true); 
      var w2 = $div2.outerWidth(true); 
      var b2 = y2 + h2; 
      var r2 = x2 + w2; 
      if (b1 <= y2 || y1 >= b2 || r1 <= x2 || x1 >= r2) return false; 
      return true; 
     }