检测 Div 何时滚出视图

Question

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

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

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

然后反转，当滚动到网页顶部时，.body-Container 固定，.coverImg 重新出现。

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

我很难检测到 div 的底部何时碰到 window 的顶部。改变定位。

这里有一个 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（window 顶部），您将添加 class outOfView（您可以在其中添加位置样式），如果没有，则删除 class：

    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');
        }
    });

检测 Div 何时滚出视图

Detect When Div scrolls out of view

jquery

css

scroll

detect