Javascript 运行$（'；a'；）.animate（），当滚动点击特殊部分时

我有一个滚动的问题

我在jquery中还是新手，我刚刚成功地使这个条动画化，我点击了某个'a'标记，并使窗口滚动到某个div#id，该'a'标记有href（作为锚定），但我希望它就像用户向下或向上滚动到某个部分div#id一样，动画条移动到其导航“a”，表示这是活动页面。你能帮忙吗，我会非常感激的

HTML

---

这是我的小提琴：

Psuedo代码：

$(window).scroll(function(){
     var top = $(window).scrollTop();
     if( top > 200 ) {
         // Enable A
     } else if( top > 400 ) {
        // Enable B
    }
});

---

我应该如何将其应用/添加到我的编码中。我有点困惑，我试过了，但没有成功。。。

body {padding: 0; margin: 0;}

/*---------- header container [1] ----------*/
.navigation-container {width:100%; height:60px; background-color:#1a1a1a; position:fixed; top:0px;}
.navigation-wrapper {width:1015px; height:60px; background-color:#1a1a1a; margin:auto; font-family:oswaldbook; text-align:center; position:relative; color:#ededee;}
.navigation-wrapper ul { display:block; width:1015px; height:60px; background-color:#1a1a1a; margin-top:0px; padding:0px;}
.navigation-wrapper ul li {list-style:none; display:inline-block; background-color:#1a1a1a; text-decoration:none; }
.navigation-wrapper ul li a {display:block; height:40px; width:120px; display:block; cursor:pointer; background-color: #1a1a1a; padding-top:20px; text-decoration:none; color: #ededee; }
.navigation-wrapper ul li a:hover {color:white;}
.navigation-wrapper ul li.logo a { width:238px; height: 40px; display:block; display:block; background-color:none;}
.bar-active { width:111px; height:20px; background-color:yellow; position:absolute; left:25px; top:50px; z-index:1;}

/*---------- home container [1] ----------*/
#home-container {width:100%; height:600px; background-color:#ededee; margin-top:60px; padding-top:90px; padding-bottom:90px;}

/*---------- about container [1] ----------*/
#about-container {width:100%; height:600px; background-color:gold;padding-top:90px; }

/*---------- services container [1] ----------*/
#services-container {width:100%; height:600px; background-color:brown;padding-top:90px; }

/*---------- clients container [1] ----------*/
#clients-container {width:100%; height:600px; background-color:gold;padding-top:90px; }

/*---------- portfolio container [1] ----------*/
#portfolio-container {width:100%; height:600px; background-color:silver;padding-top:90px; }

/*---------- contact container [1] ----------*/
#contact-container {width:100%; height:600px; background-color:pink;padding-top:90px; }

$(window).scroll(function(){
     var top = $(window).scrollTop();
     if( top > 200 ) {
         // Enable A
     } else if( top > 400 ) {
        // Enable B
    }
});