当Div滚动到视线之外时检测

Question

我有一个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;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0;
  margin-bottom: 100vh;
  z-index: 2;
}

.content {
  width: 90%;
  height: 2500px;
  margin: 0 auto;
  position: absolute;
  top: 20px;
  bottom: 0px;
  left: 0px;
  right: 0;
  z-index: 1;
  background-color: skyblue;
}

Answer 1

类似的做法可能会有所帮助。每次用户滚动时，您都要检查div底部的位置-如果它小于0（位于窗口顶部），则添加类outOfView（可以在其中添加位置样式），否则，请删除类：

    jQuery(window).on('scroll', function () {
        var top = jQuery(window).scrollTop(),
            divBottom = jQuery('.coverImg').offset().top + jQuery('.coverImg').outerHeight();
        if (divBottom > top) {
            jQuery('.coverImg').removeClass('outOfView');
        } else {
            jQuery('.coverImg').addClass('outOfView');
        }
    });