小编Jar*_*t_ 的帖子

我有一个div框，其中包含所有页面内容 .body-Container

还有一个div盒放在它的顶部，.body-Container它的作用就像一个叫做的盖子.coverImg。

我要实现的目标是将.body-Container位置固定，直到.coverImg滚动到视线之外，然后将位置从固定更改为相对。允许用户继续查看内容。

然后反转，当滚动到网页顶部时，它.body-Container变得固定，并.coverImg重新显示。

我给了.coverImg一个magin-bottom:100vh允许div滚动出视野的a。

我很难检测div的底部何时到达窗口的顶部。改变位置。

这是一个jsfiddle，可以更好地了解我要执行的操作。

HTML：

<div class="coverImg" style="background-image:url(https://cdn.creativelive.com/fit/https%3A%2F%2Fcdn.creativelive.com%2Fagc%2Fcourses%2F5158-1.jpg/640);">
</div>

<div class="body-Container">
  <div class="content">
    <div class='section'>
    </div>
    <div class='section'>
    </div>
    <div class='section'>
    </div>
  </div>
</div>

的CSS

.body-Container {
  position: relative;
  position:fixed;
  width: 100%;
  height: 99vh;
  margin: 0;
  padding: 0;
  border: 3px solid red;
}

.coverImg {
  width: 90%;
  height: 150vh;
  margin: 0 auto;
  border: 3px solid black;
  position: absolute; …