Gewusst wie: Menübutton auf Scroll zu markieren - AngularJs

Question

Dies ist ein sehr häufiges Problem, aber ich kann es nicht herausfinden. Ich habe eine Website, auf der alle Abschnitte auf derselben Seite sind und Sie können sie durch Scrollen anzeigen. Ich möchte, dass wenn ich in der Rubrik "About" bin, der About-Button im Menü hervorgehoben wird. Ich weiß, wie man es onclick, aber nicht beim Scrollen macht.

Dies ist mein Code:

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> 

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

EDIT Dies ist die Lösung von @FrontMonkey vorgeschlagen ist

Zunächst einmal in die index.html muss hinzufügen:

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

die here finden werden.

Die main.js ist diese

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

Sie haben einige css

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