title: Stop sticky bootstrap column once it reaches div
body: <p>I have simple bootstrap row with two columns:</p>
  
  <pre><code>&lt;div class="row"&gt;
  
    &lt;div class="col-xs-7"&gt;
      &lt;p&gt;All the way with you&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="col-xs-5" id="stay"&gt;
      &lt;p&gt;So happy to go&lt;/p&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="stop"&gt;
    &lt;p&gt;DON'T GO HERE.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks to this script, the column with id #stay will follow the first column all the way down:</p>
  
  <pre><code>$(document).ready(function() {
    (function($) {
        var element = $('#stay'),
            originalY = element.offset().top;
  
        // Space between element and top of screen (when scrolling)
        var topMargin = 10;
  
        // 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(false, false).animate({
                top: scrollTop &lt; originalY
                        ? 0
                        : scrollTop - originalY + topMargin
            }, 300);
        });
    })(jQuery);
  });
  </code></pre>
  
  <p>Here is an example: <a href="https://jsfiddle.net/16vqvqev/7/" rel="nofollow">https://jsfiddle.net/16vqvqev/7/</a> . I want to accomplish to stop the column following down once it will reach the div with id #stop. </p>
  
  <ol>
  <li>How can I make it with this js?</li>
  <li>I tried to do it with affix bootstrap but didn't go far either... how it would be in that case?</li>
  </ol>
  
  <p><strong>EDIT:</strong> My website has actually some content before the row with sticky column, so the code is actually like this: <a href="https://jsfiddle.net/16vqvqev/11/" rel="nofollow">https://jsfiddle.net/16vqvqev/11/</a></p>