javascript - 在一定高度后固定滚动 div，然后在到达其他 div 后停止？

Question

如标题所示，我正在制作一个具有固定 属性的 div，然后在用户滚动到某个点时停止。

下面是我试图复制的事件的 GIF 示例。

http://i.imgur.com/wCXAOwW.gifv

这是我的 fiddle :

https://jsfiddle.net/e1u4rqtk/2/

var navWrap = $('#cont'),
  nav = $('cont'),
  startPosition = navWrap.offset().top,
  stopPosition = $('#stop').offset().top - nav.outerHeight();

$(document).scroll(function() {
  //stick nav to top of page
  var y = $(this).scrollTop()

  if (y > startPosition) {
    nav.addClass('sticky');
    if (y > stopPosition) {
      nav.css('top', stopPosition - y);
    } else {
      nav.css('top', 0);
    }
  } else {
    nav.removeClass('sticky');
  }
});

但是它不能正常工作。知道我错过了什么吗？

Answer 1

你不需要javascript，你可以使用position: sticky

HTML:(你不需要那些额外的 div)

<div class="d" id="fixedscroll">
  <img src="https://ormuco.com/wp-content/uploads/2018/08/Large-Rectangle-336-x-280-Google-Ads-1-1-336x250.jpg">
</div>

CSS:

.d {
  background-color: #FFF000;
  width: 336px;
  height: 600px;
  margin: 0px auto;
}

#fixedscroll img {
  position: sticky;
  top: 0px;
}

检查它是否正常工作 https://jsfiddle.net/w9n2ubmg/

https://developer.mozilla.org/en-US/docs/Web/CSS/position