javascript - Stop sticky bootstrap column once it reaches div -

i have simple bootstrap row 2 columns:

<div class="row">    <div class="col-xs-7">     <p>all way you</p>   </div>    <div class="col-xs-5" id="stay">     <p>so happy go</p>   </div>  </div>  <div id="stop">   <p>don't go here.</p> </div> 

thanks script, column id #stay follow first column way down:

$(document).ready(function() {   (function($) {       var element = $('#stay'),           originaly = element.offset().top;        // space between element , top of screen (when scrolling)       var topmargin = 10;        // should set in css; here emphasis       element.css('position', 'relative');        $(window).on('scroll', function(event) {           var scrolltop = $(window).scrolltop();            element.stop(false, false).animate({               top: scrolltop < originaly                       ? 0                       : scrolltop - originaly + topmargin           }, 300);       });   })(jquery); }); 

here example: https://jsfiddle.net/16vqvqev/7/ . want accomplish stop column following down once reach div id #stop.

1. how can make js?
2. i tried affix bootstrap didn't go far either... how in case?

edit: website has content before row sticky column, code this: https://jsfiddle.net/16vqvqev/11/

your issue fixed slight adjustment if statement, instead of checking height of window made check final position screen has moved , according either stick top of #stop or scroll did before

https://jsfiddle.net/dmitri_aleksejev/16vqvqev/8/

 top: scrolltop   - originaly   + topmargin   + element.height()   + parseint(element.css("padding-bottom"))  > end      ? element.css("top", end - $(element).height() - 60)     : scrolltop - originaly + topmargin 

instead of:

top: scrolltop < originaly    ? 0    : scrolltop - originaly + topmargin