停止スティッキーブートストラップ・コラム、それは私は2つの列を持つシンプルなブートストラップ行を持っているのdiv

Question

に達する：このスクリプトに

<div class="row"> 

    <div class="col-xs-7"> 
    <p>All the way with you</p> 
    </div> 

    <div class="col-xs-5" id="stay"> 
    <p>So happy to go</p> 
    </div> 

</div> 

<div id="stop"> 
    <p>DON'T GO HERE.</p> 
</div> 

おかげで、IDの#stayを持つ列には、すべての方法ダウン最初の列に従います：

を

$(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 < originalY 
         ? 0 
         : scrollTop - originalY + topMargin 
      }, 300); 
     }); 
    })(jQuery); 
}); 

ここに例があります：https://jsfiddle.net/16vqvqev/7/。 id＃stopでdivに達すると、それに続く列を停止するようにしたい。

1. このjsでどうすればいいですか？
2. 私は接写ブートストラップでそれをやろうとしましたが、それほど遠くに行っていませんでした。

EDIT：私のウェブサイトは、実際に粘着性の列と行の前にいくつかのコンテンツを持っているので、コードは次のように実際にある：あなたの問題は今、あなたのif文を微調整して固定されているhttps://jsfiddle.net/16vqvqev/11/

Answer 1

、代わりに、ウィンドウの高さをチェックする私はそれはそれは

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

前に行ったように、画面のどちらか#STOPの上部に固執またはスクロール移動し、それに応じた場所への最終的な位置を確認作ら0

top: scrollTop 
- originalY 
+ topMargin 
+ element.height() 
+ parseInt(element.css("padding-bottom")) 
> end 
    ? element.css("top", end - $(element).height() - 60) 
    : scrollTop - originalY + topMargin 

の代わり：

top: scrollTop < originalY 
    ? 0 
    : scrollTop - originalY + topMargin