如何在滚动时突出显示菜单按钮 - AngularJs

这是一个非常普遍的问题，但我无法弄清楚。我有一个网站，其中所有部分都在同一页面上，您可以通过滚动查看它们。我希望当我在"关于"部分时，菜单上的"关于"按钮会突出显示。我知道如何在点击时完成，但不知道如何在滚动时完成。

这是我的代码：

索引.html：

<nav id="nav-wrap">
   <ul id="nav" class="nav">
      <li class="current"><a class="smoothscroll" ng-click="gotoElement('hero')" href="">Home</a></li>
       <li ng-repeat="item in menuItems"><a ng-click="gotoElement(item.id)" href="">{{item.page}}</a>
   </ul>
</nav>

主.js

    angular.module('allApps').service('anchorSmoothScroll', function(){
        this.scrollTo = function(eID) {
            var stopY = elmYPosition(eID)-headerHeigh;
            var sections = $("section"),
            navigation_links = $("#nav-wrap a");
            $('html, body').animate({
                      scrollTop: stopY
            }, 500);

//Highlights menu buttons
        var sections = $("section"),
        navigation_links = $("#nav-wrap a");
        if($("body").hasClass('homepage')) {
            sections.waypoint( {
              handler: function(event, direction) {
                   var active_section;
                    active_section = $(this);
                    if (direction === "up") active_section = active_section.prev();
                    var active_link = $('#nav-wrap a[href="#' + active_section.attr("id") + '"]');
                 navigation_links.parent().removeClass("current");
                    active_link.parent().addClass("current");
                },
                offset: '25%'
            });
        }

            function elmYPosition(eID) {
                var elm = document.getElementById(eID);
                var y = elm.offsetTop;
                var node = elm;
                while (node.offsetParent && node.offsetParent != document.body) {
                    node = node.offsetParent;
                    y += node.offsetTop;
                } return y;
            }
        };
    });
        angular.module('allApps').controller('menuCtrl', function($scope, $location, $window, anchorSmoothScroll) {
            $scope.menuItems=[
                              {page:"What WE do", id:"services"},
                              {page:"Why choose US", id:"about"},
                              {page:"our works", id:"portfolio"},
                              {page:"Partner", id:"partner"},
                              {page:"News", id:"news"},
                              {page:"Contact", id:"contact"}
                              ];
            $scope.gotoElement = function (eID){
                $location.hash(eID);
                anchorSmoothScroll.scrollTo(eID);
            };
        });

编辑这是@FrontMonkey建议的解决方案

首先，在索引中.html必须添加以下内容：

<script src="js/angular-scroll.js"></script>

可以在这里找到。

主要的.js是这个

angular.module('allApps').controller('menuCtrl', function($scope, $location, $document) {
    $scope.menuItems=[
                      {page:"What WE do", id:"services"},
                      {page:"Why choose US", id:"about"},
                      {page:"our works", id:"portfolio"},
                      {page:"Partner", id:"partner"},
                      {page:"News", id:"news"},
                      {page:"Contact", id:"contact"}
                      ];
    /*Scroll function: change background-color of the header*/
    $scope.toTheTop = function() {
        $document.scrollTopAnimated(0, 800);
        var h = $('header').height();
        var y = $(window).scrollTop();
        var header = $('#main-header');
        if ((y > h + 30 ) && ($(window).outerWidth() > 768 ) ) {
          header.addClass('opaque');
        }else {
             if (y < h + 30) {
                header.removeClass('opaque');
             }else {
                header.addClass('opaque');
             }
        }
    }
}).value('duScrollOffset', 30);