Slide up and slide down on mouse scroll

Question

I created two divs in a page. The first div, .first-box, slides up when I scroll down. Therefore page .main-container scrolls as I scroll down. When I scroll up the page scrolls up well. However when .main-container reaches the top and I scroll up I wish .first-box to slide down, but this does not work.

I don't have deep knowledge of jQuery, but I used something as below. Please help me to improve it so that the first div slides down when the position of .main-container will at the top of the window.

I expect the first div slides down after main container scroll up top position.

$(window).bind('mousewheel DOMMouseScroll', function(event) {
  if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
    // scroll up
    $(window).scroll(function() {
      if ($(this).scrollTop()) {
        $('.first-box').slideDown();
      }
    });
  } else {
    // scroll down
    $('.first-box').slideUp();
  }
});

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

p {
  padding: 10px 50px;
  font-size: 18px;
  font-family: Arial;
}

.first-box {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  z-index: 9;
}

.main-container {
  position: absolute;
  top: 20px;
  left: 20px;
  bottom: 20px;
  right: 20px;
  padding: 30px;
  overflow-y: scroll;
  overflow-x: hidden;
}


/* Let's get this party started */

 ::-webkit-scrollbar {
  width: 12px;
}


/* Track */

 ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}


/* Handle */

 ::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(255, 0, 0, 0.8);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

 ::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 0, 0.4);
}

.second-box {
  width: 100%;
  height: 100%;
  background: red;
  color: #fff;
}

.third-box {
  width: 100%;
  height: 100%;
  background: yellow;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="first-box">first box</div>
<div class="main-container">
  <div class="second-box">
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
  </div>
  <div class="third-box">
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
  </div>
</div>

Answer 1

Try is using event.originalEvent.wheelDelta < 0 || event.originalEvent.detail < 0

$(window).bind('mousewheel', function(event) {
  if (event.originalEvent.wheelDelta < 0 || event.originalEvent.detail < 0) {
    //scroll down
    $('.first-box').slideUp();
  } else {
    //scroll up
    if ($('.main-container')[0].scrollTop <= 100)
      $('.first-box').slideDown();
  }
});

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

p {
  padding: 10px 50px;
  font-size: 18px;
  font-family: Arial;
}

.first-box {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  z-index: 9;
}

.main-container {
  position: absolute;
  top: 20px;
  left: 20px;
  bottom: 20px;
  right: 20px;
  overflow-y: scroll;
  overflow-x: hidden;
}


/* Let's get this party started */

 ::-webkit-scrollbar {
  width: 12px;
}


/* Track */

 ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}


/* Handle */

 ::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(255, 0, 0, 0.8);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

 ::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 0, 0.4);
}

.second-box {
  width: 100%;
  height: 100%;
  background: red;
  color: #fff;
}

.third-box {
  width: 100%;
  height: 100%;
  background: yellow;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="first-box">first box</div>
<div class="main-container">
  <div class="second-box">
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
  </div>
  <div class="third-box">
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
  </div>
</div>