单页导航菜单 - 活动指示灯 [英] 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
ok，这个例子：

这个想法是：

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

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

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

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

PS。对不起我的英语

PS. sorry for my english

Javascript

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屋！