javascript - 到达div时停止粘性 bootstrap 列

我有两列的简单引导行：

<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。


我怎么能用这个js呢？
我试着用词缀引导程序来做，但是也没有走太远……在那种情况下会怎么样？


编辑：我的网站实际上在带有粘性列的行之前有一些内容，因此代码实际上是这样的：https://jsfiddle.net/16vqvqev/11/

最佳答案

现在，通过稍微调整if语句解决了您的问题，而不是检查窗口的高度，而是让它检查了屏幕移动到的最终位置，并根据它固定在#stop或滚动条的顶部和以前一样

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

代替：

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