单个滚动图像固定内容更改

Question

下面是我的代码，我很困惑写入jquery代码，我的问题是我想在下一个div上添加类激活并从第一个div中删除向下滚动和相同的过程反向应用当我向上滚动时，请附加你的来自开头的jquery代码

.main {
  height: 1000px;
  position: relative;
  width: 100%;
}

.image {
  position: fixed;
  top: 0%;
  left: 0;
  height: 500px;
  max-width: 100%;
}

.content {
  position: absolute;
  top: 0;
  opacity: 0;
}

.active {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="content active">
    content 1
  </div>
  <div class="content">
    content 2
  </div>
  <div>
    <img src="https://image01.oneplus.net/ebp/201711/10/1712/9350700c52f43348092d34664711c51d.png" class="image">
  </div>
</div>

Answer 1

改变固定在相对位置的图像位置。

.image{
position:relative;
}

Answer 2

我通过在第三个函数中添加一个局部变量来修复此问题，然后每次用户滚动时都会更新

$(document).ready(function(){
   $(window).scroll(function(){
      var currentScreenPosition  = $(document).scrollTop();
      if (currentScreenPosition > divThreeHeight) {
          $( "content" ).addClass( "active" );
      };
   });
});