即使在CSS溢出隐藏后，视差图像也会溢出

Question

我有一个项目，我正在使用视差效果。我的代码与该项目完全相同：

$(window).scroll(function(){

var wScroll = $(this).scrollTop();
$('.flying-man').css({'transform':'translateY( -'+ ( wScroll- $('.flying-man').offset().top/1.2 )/150+'%)'});
});

#fun2 {
  margin-top: 8%;
  overflow: hidden;
}
.space-back {
  background: url(https://i.stack.imgur.com/WgyaY.jpg) no-repeat;
  background-position: center;
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100%;
}
.flying-man {
  position: absolute;
  background: url(https://i.stack.imgur.com/LMAGK.png) no-repeat;
  background-position: bottom left;
  background-size: 70%;
  margin-top: 50px;
  width: 100%;
  height: 100vh;
  /*background-color: rgba(2,2,2,0.5);*/
}
section {
  min-height: 100vh;
}

<section id="fun2">
  <div class="space">
    <div class="space-back"></div>
    <div class="flying-man"></div>
  </div>
</section>
<section id="speakers2">
</section>
    <script
  src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
  integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc="
  crossorigin="anonymous"></script>

我想要的只是第二个图像，其中包含类.flying-man并且不会溢出。我有一个脚本可以将它从y轴转换（滚动时向下到向上）。

您可以在此图片中看到问题。

Answer 1

只需添加

#fun2 {
  margin-top: 8%;
  overflow: hidden;
  position:relative;     /* <<< this */
}

否则overflow: hidden将无效