Изображения Parallax, переполненные даже после переполнения 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 не будет иметь никакого эффекта