单页导航菜单 - 活动指示器

Question

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

我想根据当前视图中的部分更新导航。使用导航链接向下时效果很好。我的问题是，当您尝试滚动到当前部分上方的部分时，查看活动锚点位于应位于的位置下方。

请看我的Demo。

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

<ul>
    <li class="test"><a href="#test"></a></li>
    <li class="test2"><a href="#test2"></a></li>
    <li class="test3"><a href="#test3"></a></li>
    <li class="test4"><a href="#test4"></a></li>
    <li class="test5"><a href="#test5"></a></li>
</ul>
<section id="test"></section>
<section id="test2"></section>
<section id="test3"></section>
<section id="test4"></section>
<section id="test5"></section>

更新

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

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

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

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

Answer 1

试试这个：your modified example

$(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 好的，this example 怎么样：

想法是：

1) 当我们点击 section N 上边框时，向下滚动时，表示活动部分变为 section N + 1。

2) 当我们点击 section N 上边框时，同时滚动顶部，意味着 section 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;
        }
    }
});