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
            });
        }
    });
});