Question

我有两列简单的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/

Answer 1

现在通过对if语句稍作调整来解决您的问题，而不是检查窗口的高度我检查了屏幕移动位置的最终位置，并根据该位置粘贴到＃顶部

之前停止或滚动

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

> sessionInfo()
R version 3.2.3 (2015-12-10)
Platform: x86_64-apple-darwin13.4.0 (64-bit)
Running under: OS X 10.11.4 (El Capitan)

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] data.table_1.9.6

loaded via a namespace (and not attached):
[1] tools_3.2.3  chron_2.3-47

而不是：

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

一旦到达div

1 个答案: