title: Stop div scroll when it reaches another div
body: <p>I got this answer here at SO to make a div scroll when the user scroll down the page. But, I need the div to stop when it reaches another div and stay in that position. How can I do that?</p>
  
  <p>jQuery code:</p>
  
  <pre><code>(function($) {
      var element = $('.sim-area-sim'),
      originalY = element.offset().top;
  
      // Space between element and top of screen (when scrolling)
      var topMargin = 140;
  
      // Should probably be set in CSS; but here just for emphasis
      element.css('position', 'relative');
  
      $(window).on('scroll', function(event) {
          var scrollTop = $(window).scrollTop();
  
          element.stop(true, true).animate({
              top: scrollTop &lt; originalY
                   ? 0
                   : scrollTop - originalY + topMargin
          }, 300);
      });
  })(jQuery);
  </code></pre>
  
  <p>Thanks!</p>