How do I make a div slide out and in when it reaches another div

Question

So I want a div (a menu) to slide out from the right when it reaches a certain point, in this case another div. I can make it slide out, however when I go above the div it doesn't hide back, i tried adding another if statement but that doesn't make it even slide out.

< script >
  $(document).ready(function() {
    var topOfOthDiv = $("#show").offset().top;
    $(window).scroll(function() {
      if ($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
        var div = $(".sidemenu");
        div.animate({
          right: '25%'
        }, "slow");
      } else if ($(window).scrollTop() < topOfOthDiv) {
        var div = $(".sidemenu");
        div.animate({
          right: '0%'
        }, "slow");
      }
    });
  }); <
/script>

body {
  margin: 0;
  padding: 0;
  background: #262626;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 16px;
  color: #e2e2e2;
}

.menu {
  position: absolute;
  width: 100%;
  text-align: center;
  text-transform: lowercase;
  left: 50%;
  top: 20%;
  transform: translate(-50%);
}

.sidemenu {
  position: fixed;
  top: 5%;
  right: 0%;
}

.sidemenu ul {
  position: absolute;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(1, 1fr);
}

.sidemenu ul li {
  list-style: none;
  transition: .5s;
}

.sidemenu ul li a {
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  font-size: 15px;
  display: block;
  padding: 50px;
  text-transform: uppercase;
  text-decoration: none;
  color: #262626;
  white-space: nowrap;
  transition: .5s;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 15s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: colours;
  -webkit-animation-timing-function: ease;
  letter-spacing: 3px;
}

h1 {
  font-size: 50px;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 15s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: text;
  -webkit-animation-timing-function: ease;
}

h2 {
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 15s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: text;
  -webkit-animation-timing-function: ease;
}

.menu ul {
  position: absolute;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(4, 1fr);
  left: 50%;
  transform: translate(-50%);
}

.menu ul li {
  list-style: none;
  transition: .5s;
}

.menu ul li a {
  font-family: 'Montserrat', sans-serif;
  display: block;
  padding: 80px;
  font-size: 20px;
  text-transform: uppercase;
  text-decoration: none;
  color: #262626;
  white-space: nowrap;
  transition: .5s;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 15s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: colours;
  -webkit-animation-timing-function: ease;
  letter-spacing: 3px;
}

@-webkit-keyframes colours {
  0% {
    background: #39f;
    color: antiquewhite;
  }
  15% {
    background: #8bc5d1;
    color: black;
  }
  30% {
    background: #f8cb4a;
    color: black;
  }
  45% {
    background: #95b850;
    color: black;
  }
  60% {
    background: #944893;
    color: antiquewhite
  }
  75% {
    background: #c71f00;
    color: antiquewhite;
  }
  90% {
    background: #bdb280;
    color: black;
  }
  100% {
    background: #39f;
    color: antiquewhite;
  }
}

@-webkit-keyframes text {
  0% {
    color: #39f;
  }
  15% {
    color: #8bc5d1;
  }
  30% {
    color: #f8cb4a;
  }
  45% {
    color: #95b850;
  }
  60% {
    color: #944893;
  }
  75% {
    color: #c71f00;
  }
  90% {
    color: #bdb280;
  }
  100% {
    color: #39f;
  }
}

.menu ul li:hover {
  transform: translateY(-8%);
}

section {
  text-align: left;
  font-size: 20px;
}

section div {
  width: 80%;
  margin-left: 10%;
}

section a {
  text-decoration: none;
  color: #e2e2e2;
}

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

.spacer2 {
  height: 10%;
  width: 100%;
}

#particles-js {
  background-size: cover;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: -1;
}

#datecount {
  font-size: 25px;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 15s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: text;
  -webkit-animation-timing-function: ease;
}

This is a snippet, it doesn't work on here properly but it does the job

Answer 1

The problem you have is that you run .animate() many times, and you end up with many animations running at the same time. Below is it working, with a extra moving variable which stops the animation from playing multiple times at the same time.

$(document).ready(function () {
    var moving = false;
    var topOfOthDiv = $("#show").offset().top;
    $(window).scroll(function () {
        if(moving) return; // dont trigger it twice
        moving = true;
        if ($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
            var div = $(".sidemenu");
            div.animate({ right: '25%' }, "slow", undefined, function() {
                moving = false; //reset this
            });
        } else if ($(window).scrollTop() < topOfOthDiv) {
            var div = $(".sidemenu");
            div.animate({ right: '0%' }, "slow", undefined, function () {
                moving = false; //reset this
            });
        }
    });
});