是否有 jQuery 替代位置：粘性？

Question

假设我正在制作一个带有两个 col-lg-6 div 的 bootstrap 4 布局。左边的包含一个图像，右边的包含一堆文本，足够长以使页面可滚动。 由于 bootstrap 4 中的网格是基于 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>