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

当Div滚出视图时检测

1 个答案: