到达div时停止粘性引导程序列 [英] Stop sticky bootstrap column once it reaches div

问题描述

我有两列的简单引导行:

I have simple bootstrap row with two columns:

<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的列将一直跟随第一列:

Thanks to this script, the column with id #stay will follow the first column all the way down:

$(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的列，就停止它.

Here is an example: https://jsfiddle.net/16vqvqev/7/ . I want to accomplish to stop the column following down once it will reach the div with id #stop.

1. 如何用此js做到这一点?
2. 我曾尝试使用词缀引导程序来执行此操作，但也没有走太远……在这种情况下会如何?

编辑:我的网站实际上在带有粘性列的行之前有一些内容，因此代码实际上是这样的:

My website has actually some content before the row with sticky column, so the code is actually like this: https://jsfiddle.net/16vqvqev/11/

推荐答案

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

your issue is now fixed with the slight adjustment to your if statement, instead of checking for the height of the window I made it check the final position to where the screen has moved and according to that either stick to top of the #stop or scroll as it 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

代替:

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

这篇关于到达div时停止粘性引导程序列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！