通过使用jQuery添加类来动画菜单导航栏

Question

我有一个菜单栏，当它离开名为“#main”的div框时，我想制作动画。

我想让它在再次进入div框时动画回来，同时也是一个名为“#about”的div框。 （“#about”div框位于“#main”div框之后。）

以下是我编码的方式，部分工作原理。当它进入“#about”div框时，它不会动画回来。 我怎样才能使它全部工作？

谢谢，

$(document).ready(function() {

  var position = $(window).scrollTop;
  var mainPostion = $('#main').offset().top;
  var aboutPostion = $('#about').offset().top;

  $(window).scroll(function() {

    position = $(window).scrollTop();

    if (position > window.innerHeight - 40 && position > mainPostion) {
      $("#menu").addClass("animate-menu");
      $("nav img").addClass("animate-menu2");
      $("#logo").addClass("animate-menu3");
    } else if (position > window.innerHeight && position > aboutPostion) {
      $("#menu").removeClass("animate-menu");
      $("nav img").removeClass("animate-menu2");
      $("#logo").removeClass("animate-menu3");
    } else {
      $("#menu").removeClass("animate-menu");
      $("nav img").removeClass("animate-menu2");
      $("#logo").removeClass("animate-menu3");
    }
  });
});

<style>
#menu {
    font-family: 'Open Sans';
    font-weight: 600;
    z-index: 1;
    width: 100%;
    position: fixed;
    color: white;
    padding-top: 30px;
    padding-bottom: 10px;
    font-size: 15px;
    opacity: 1;
    top: 0;
    left: 0;  
}
#menu.animate-menu { 
    animation-name: menuani;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes menuani {
    0%{ background: #303B40; }
    100%{
        padding-top: 4px;
        padding-bottom: 4px;
        background: #5DC5C6;
        font-size: 13px;
    }
}
    #menu a {
        text-decoration: none;
        color: white;
        cursor: pointer;
    }
    nav ul { display: flex; }
        nav img {
            width: 60px;
            margin-top: 2px;
        }
        nav img.animate-menu2 { animation: logoani 0.5s 1 forwards; }
        @keyframes logoani {
            0%{ transform: scale(1.0); }
            100%{ transform: scale(0.69); }
        }
        #logo {
            flex-grow: 1;
            padding-left: 35px;
            flex-shrink: 0;
        }
        #logo.animate-menu3 { animation: logoani2 0.5s 1 forwards; }
        @keyframes logoani2 {
            0%{  }
            100%{ padding-left: 20px; }
        }
#main {
        margin: 0 auto;
        text-align: center;
        color: white;
    }
#about {
    width: 100%;
    height: auto;
    display: flex;
}
</style>