How to correct overlapping section with fixed position by scrolling?

Question

I need to create slide effect for the home page section. We have first section and after mouse scroll the second screen should smoothly overlap the first screen. For creating the effect I used the next HTML markup:

<div class="wrapper">

   <section id="intro" class="main-screen">
        <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
   </section>

   <div id="wrap-content" class="sections--wrap">

      <section id="overlay-section" class="services-slides">
        <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
      </section>

      <section class="services-about">
       <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
      </section>
      <section class="services-complex">
       <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
      </section>

   </div>

</div>

This is the CSS:

.slide-section-wrapper {
  bottom: 0;
  height: 100vh;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  z-index: 1;
}

.sections--wrap {
   overflow: hidden;
   position: relative;
   -webkit-transform: translateY(100vh);
   -ms-transform: translateY(100vh);
   transform: translateY(100vh);
   -webkit-transition: all .4s cubic-bezier(.23,.6,.01,.22);
   -o-transition: all .4s cubic-bezier(.23,.6,.01,.22);
   transition: all .4s cubic-bezier(.23,.6,.01,.22);
   z-index: 4;
}

.sections--wrap.active {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

The idea: when we add class active to sections--wrap it smooth overlap the first screen section. It works but only when I add the active class manually into the browser console. My jQuery does not work well for this porposes:

$('#intro').bind('mousewheel', function(e) {

        var x=window.scrollX;
        var y=window.scrollY;
        window.onscroll=function(){window.scrollTo(x, y);};
        
        if(e.originalEvent.wheelDelta / 120 > 0) {
            console.log('up')
        } else {
            console.log('down')
            $('#sections-wrapp').addClass('active')
            $('#overlay-section').addClass('active')
        }

    });

    $('#overlay-section').bind('mousewheel', function(e) {

    if(e.originalEvent.wheelDelta / 50 > 0) {
            window.onscroll=function(){};
            $('#sections-wrapp').removeClass('active')
            console.log(e.originalEvent.wheelDelta)
            console.log('up overlay')
            
        } else {
            console.log('down');
            window.onscroll=function(){};
            $('#sections-wrapp').addClass('active')
        }
    });

When I scroll down this code is working properly. But when I try scroll top it also works but not good((( Please help me refactor the jQuery code. I really try to solve during two days and can not.