即使 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>

我只想要第二张图片，将 class .flying-man 包含在该部分中并且不会溢出。我有一个从 y 轴（向下滚动到向上）翻译它的脚本。

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

Answer 1

只需添加

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

否则overflow: hidden无效

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

Parallax images overflowing even after CSS is overflow hidden

css

overflow

parallax