JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<body>
  <header id="menubar"><p>hi im a header</p></header>
  <section class="slide s1 l1"><p>im the first</p></section>
  <section class="slide s2 l2"><p>im the second</p></section>
  <section class="slide s3 l3"><p>im the third</p></section>
</body>

CSS

* { margin: 0; padding: 0 }

#menubar {
  width: 100%;
  background-color: orange;
  height: 60px;
}

.slide {
  position: absolute;
  width: 100%;
  top: 60px;
  bottom: 0;
}
.slide.s1 { background-color: green; }
.slide.s2 { background-color: red; }
.slide.s3 { background-color: cornflowerblue; }
.l1 { z-index: 3; }
.l2 { z-index: 2; }
.l3 { z-index: 1; }

JavaScript

$(window).bind('mousewheel DOMMouseScroll', function(event){
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        console.log('scrolling down');
    }
    else {
        console.log('scrolling up');
        $('.s1').slideUp('slow');
    }
});