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

Question

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

这是我的代码：

index.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>

ma​​in.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 建议的解决方案

首先，进入index.html必须添加这个：

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

可以找到here。

ma​​in.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);

Answer 1

你必须应用一些 css

 #nav li:hover,#nav li:active{
  background: somecolor;
 }