检测 Div 何时滚动出视图

Question

>我有一个div框，里面的所有页面内容都叫做.body-Container

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

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

然后反向，当滚动到网页顶部时，.body-Container变得固定，.coverImg重新出现在视图中。

我已经给了.coverImg一个magin-bottom:100vh，允许div滚动出视图。

我很难检测到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');
        }
    });