Question

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

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

1 个答案: