Скрыть элемент, когда он касается других элементов на странице с jQuery

Question

Я хотел скрыть элемент боковой панели, когда он перекрывается с изображениями на странице. Я нашел отличный ответ в StackOverflow, но он не полностью решил мою проблему. Прямо сейчас это работает только с первым изображением на странице. Он будет скрывать боковую панель, когда он касается первого изображения. Но это не скроет для остальных изображений. Что мне делать, если я хочу, чтобы он работал со всеми изображениями на странице?

Вот мой код.

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) {
    $div1.addClass('show')
  } else {
    $div1.removeClass('show')
  }
}

window.setInterval(function () {
  collision($('#content-nav'), $('.image-container'))
}, 100)

Вот как это работает прямо сейчас. https://imgur.com/a/BvTyiDQ