单页导航菜单 – 活动指示灯

我正在尝试使用jQuery waypoints更新单页网站的导航。

我想根据视图中的当前部分更新导航。 使用导航链接时，它可以正常工作。 我的问题是当你试图滚动到当前部分上方的一个部分时，活动锚点应该在下面的位置。

请看我的演示 。

jQuery的

$(document).ready(function(){ $('section').waypoint(function(direction) { thisId = $(this).attr('id'); $('ul li').each(function(){ var secondaryID = $(this).attr('class'); if ( secondaryID == thisId ) { $('ul li').removeClass('active'); $(this).addClass('active'); } }); },{offset: '0'}); }); $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 500); return false; } } }); 

HTML

更新

我使用具有不同偏移的两个航路点function来实现此function，但这显然不是最佳解决方案。

http://jsfiddle.net/SJkmh/10/

我试图找到一种从同一函数中指定偏移量的方法（取决于方向），我使用一个变量作为偏移量，值为（1＆-1），但不幸的是它只使用+1。

http://jsfiddle.net/SJkmh/13/

Answer 1

试试这个： 你修改过的例子

 $(document).ready(function(){ $('section').waypoint(function(direction) { var me = $(this); //added thisId = $(this).attr('id'); $('ul li').each(function(){ var secondaryID = $(this).attr('class'); if ( secondaryID == thisId ) { $('ul li').removeClass('active'); //added if(direction==='up'){ me = $(this).prev(); } //added if(!me.length){ me = $(this); } $(this).addClass('active'); } }); },{offset: '0'}); }); 

UPD好的， 这个例子怎么样：

这个想法是：

1）当我们点击N部分顶部边界时，向下滚动，表示活动部分变为部分N + 1。

2）当我们点击N部分顶部边界时，滚动顶部，意味着部分N变为活动状态。

PS。 对不起我的英语不好

使用Javascript

 $(document).ready(function(){ $('section').waypoint(function(direction) { var activeSection = $(this); if(direction === 'down'){ activeSection = $(this).next(); } //activeSection = $(this); var sectionId = activeSection.attr('id'); $('ul li').removeClass('active'); $('ul li.' + sectionId).addClass('active'); console.log(activeSection); }); }); $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top - (target.height() / 5) }, 500); return false; } } });