title: Using jquery how do I test if the bottom of an element is level with bottom of another element?
body: <p>I have an element that is fixed when scrolling past a certain position, I want the element to become static when the bottom of that element is level with the bottom of another element.</p>
  
  <p>So basically how do I test if the bottom of an element is level with the bottom of an element that is parallel to the fixed element.</p>
  
  <p>This code handles making the element fixed, I just need to turn it off when the bottom of <code>var imgCon = $('#imageContent');</code> is level with the bottom of <code>var txtCon = $('#textContent');</code>.</p>
  
  <pre><code>var imgCon = $('#imageContent');
  var txtCon = $('#textContent');
  var offset = txtCon.offset();
  var txtCon = offset.top - 60;
  var txtbottom = $('#textContent').position().top + $('#textContent').outerHeight(true);
  if ($(this).scrollTop() &gt;= txtCon) {
      imgCon.addClass('fixed');
      imgCon.removeClass('floatImage');
      var contentWth = $('#postContent').width();
      var number = contentWth * 0.35;
      imgCon.css('width', number);
      $(window).resize(_.debounce(function () {
          var contentWth = $('#postContent').width();
          var number = contentWth * 0.35;
          $('#imageContent').css('width', number);
      }, 10));
  } else if ($(this).scrollTop() &lt;= txtCon) {
      imgCon.removeClass('fixed');
      imgCon.addClass('floatImage');
  }
  //some magic that tests whether bottom is level with parallel container bottom
  if (($(this).scrollTop()) &gt;= txtbottom) {
      imgCon.removeClass('fixed');
  }
  </code></pre>