Sidenav collision check - jquery

HTML

<div id="content-nav">
    <ul>
      <li>Nav Item</li>
      <li>Nav Item</li>
      <li>Nav Item</li>
    </ul>
  </div>
  
<div>
  <div class="text-container">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia
  </div>
  <div class="image-container">
  
  </div>
  
   <div class="text-container">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia
  </div>
  
   <div class="image-container">
  
  </div>
  
   <div class="text-container">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia
  </div>
  
   <div class="image-container">
  
  </div>
  
     <div class="text-container">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia
  </div>
  
   <div class="image-container">
  
  </div>
  
     <div class="text-container">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia
  </div>
  
   <div class="image-container">
  
  </div>
</div>

CSS

.image-container {
  width: 100%;
  height: 150px;
  background-color: violet;
}

.text-container {
  display: block;
  margin: auto;
  max-width: 150px;
}

#content-nav {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

.hide {
  visibility: hidden;
}

JavaScript

function collision ($nav) {
  var x1 = $nav.offset().left
  var y1 = $nav.offset().top
  var h1 = $nav.outerHeight(true)
  var w1 = $nav.outerWidth(true)
  var b1 = y1 + h1
  var r1 = x1 + w1
  var hide = false 

$(".image-container").each(function() {

  var x2 = $(this).offset().left
  var y2 = $(this).offset().top
  var h2 = $(this).outerHeight(true)
  var w2 = $(this).outerWidth(true)
  var b2 = y2 + h2
  var r2 = x2 + w2
  
 	if (!(b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2)) {
    hide = true;
  }
});
  if (!hide) {
    $nav.removeClass('hide')
  } else {
    $nav.addClass('hide')
  }
}

$(document).ready(function () {
window.setInterval(function () {
  collision($('#content-nav'))
}, 100)
});