这是一个非常常见的问题,但我无法弄清楚。 我有一个网站,其中所有部分都在同一页面上,您可以通过滚动查看它们。我希望当我在“关于”部分时,菜单上的“关于”按钮会突出显示。 我知道怎么做onclick而不是滚动。
这是我的代码:
的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);
};
});
修改 这是@FrontMonkey
建议的解决方案首先,进入index.html必须添加:
<script src="js/angular-scroll.js"></script>
可以找到here。
main.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);
答案 0 :(得分:0)
你必须申请一些css
#nav li:hover,#nav li:active{
background: somecolor;
}