是否有 jQuery 替代 position:sticky？

Question

假设我正在制作带有两个 col-lg-6 div 的 bootstrap 4 布局。左边的包含一个图像，右边的包含一堆文本，长度足以使页面可滚动。由于 bootstrap 4 中的 grid 是基于 flex display 属性的，所以左边的 div 会自动垂直拉伸到右边的高度。Bootstrap 4 有一个新的“sticky-top”类，它使用 position:sticky。因此，如果将“sticky-top”类添加到左侧 div 内的图像并向下滚动页面，则图像会随页面滚动，直到到达页面顶部，然后粘在顶部并保持粘性直到其父 div 的底部到达图像的底部，然后图像继续与页面一起滚动。不幸的是，所有现代浏览器仍然不完全支持 position:sticky，所以我想知道是否有跨浏览器兼容的 jQuery 替代品？我尝试通过 jquery 向图像添加一个额外的类，该类将位置更改为固定在 css 中，并在图像到达页面顶部时添加到图像中，然后我尝试在页脚进入视口后将其删除，但是使图像从视口中消失，而不是随着页面滚动，因为在移除附加类后它会弹回到其父 div 的顶部。

<header>header sticks to top</header>
<div>breadcrumbs that scroll along with the page go here</div>
<div class="row">
  <div class="col-12 col-lg-6">
    <img src="image.jpg" class="img-fluid" alt="image">
  </div>
  <div class="col-12 col-lg-6">
    <p>Bunch of random text long enough to make the page scrollable goes here</p>
  </div>
</div>
<footer>Footer stuff goes here</footer>

注意：图像应该只在大网格和超大网格上粘贴，我宁愿不必使用任何插件。

Answer 1

我写得真快。将类添加.sticky到您想要粘贴的对象，并将类添加.stickyTo到您希望它粘贴的父对象。它并不完美，但提供了一般概念，也许您可​​以针对您的项目对其进行调整。

var $sticky = $('.sticky'),
  $stickyTo = $('.stickyTo'),
  stickyToTop = $stickyTo.offset().top,
  stickyToBottom = stickyToTop + $stickyTo.outerHeight();

$(window).on('scroll', function() {
  var scroll = $(window).scrollTop(),
    stickyTop = $sticky.offset().top,
    stickyBottom = $sticky.offset().top + $sticky.outerHeight();
  
  if (stickyBottom >= stickyToBottom) {
    if (scroll < stickyTop) {
      $sticky.addClass('fixed').removeClass('abs');
    } else {
      $sticky.addClass('abs');
    }
  } else if (scroll > stickyToTop) {
    $sticky.addClass('fixed');
  } else if (scroll < stickyToTop) {
    $sticky.removeClass('abs').removeClass('fixed');
  }
});

.row {
  background: #ccc;
}

.fixed {
  position: fixed;
  top: 0;
  bottom: auto;
}

.abs {
  position: absolute;
  bottom: 0;
  top: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<header>header sticks to top</header>
<div>breadcrumbs that scroll along with the page go here</div>
<div class="row stickyTo">
  <div class="col-12 col-lg-6">
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="img-fluid sticky" alt="image">
  </div>
  <div class="col-12 col-lg-6">
    <p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p><p>Bunch of random text long enough to make the page scrollable goes here</p>
  </div>
</div>
<footer>Footer stuff goes here</footer>