JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="slide slide-1 active"></div>
    <div class="slide slide-2"></div>
</div>

CSS

.wrapper {
    position:absolute;
    background:red;
    width:100%;
    height:100%;
    top:0;
    left:0;
    overflow:hidden;
}

.slide {
    width:100%;
    height:100%;
}

.slide-1 {
    position:fixed;
    top:0;
    left:0;
    background:blue;
}

.slide-2 {
    position:absolute;
    top:100%;
    left:0;
    background:green;
}

.active{
    position:fixed;
}

JavaScript

$('.slide-1').click(function(){
$('.slide-2').addClass('active');
});
$(window).on('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        $(".slide-2").removeClass("active");
        $(".slide-2").animate({top: "100%"},500,"linear");
    }
    else {
        $(".slide-2").addClass("active");
        $(".slide-2").animate({top: "0"},500,"linear");
    }
});