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>

私が欲しいのは、第2の画像は、クラス.flying-manセクションではなく、オーバーフローに含まれていることを有するものです。私はそれをy軸（スクロールの上から下へ）から変換するスクリプトを持っています。

この画像で問題を確認できます。

Answer 1

単に

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

そうoverflow: hiddenあなたが使用しているスクリプトを含めてください