单页导航菜单 - 活动指示器 [英] Single page navigation menu - active indicator

问题描述

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

I'm trying to update the navigation for a single page website using jQuery waypoints.

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

I want to update the navigation based on the current section in view. It works fine when going down using the navigation links. My problem is when you try to scroll to a section above the current section in view the active anchor is one below where it should be.

请看我的演示.

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>

更新

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

I got this to work using two waypoint functions with different offsets but this is clearly not the best solution.

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

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

I trying to find a way of specifying offsets from within the same function (depending on direction), I used a variable for offset with values of (1 & -1), but unfortunately it only uses +1.

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

推荐答案

试试这个:你的修改示例

$(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) 当我们点击 section N 上边框时，向下滚动时，表示活动部分变为 section N + 1.

1) When we hit section N top border, while scrolling down, means active section become section N + 1.

2) 当我们点击 section N 上边框时，同时滚动顶部，意味着 section N 变为活动状态.

2) When we hit section N top border, while scrolling top, means section N become active.

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

这篇关于单页导航菜单 - 活动指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！