Jquery：突出显示当前锚标记的导航

Question

我很困惑，无法把事情放在一起......

• 我创建了一个包含不同部分的单页网站，
• 我用 jquery.sticky.js 做了一个粘性导航，
• 我在此帮助下突出显示了当前选项卡：http://jsfiddle.net/joshnh/YxRqp/。

但是当我从一个部分转到另一个部分时，导航选项卡不会改变突出显示...

我在互联网上表示 Waypoints，一个 jquery 插件 (http://imakewebthings.com/jquery-waypoints/) 可以帮助我，但它不起作用...有人可以告诉我我必须添加哪些 js、css 和 html 代码才能工作（使用 Waypoints 或没有） ？

HTML

<nav id="mainnav">
    <div class="container">
        <ul class="links">
        <li><a id="homenav" class="scroll" href="#homepage">About</a></li>
        <li><a id="sensnav" class="scroll" href="#parallax1">Sensuality</a></li>
        <li><a id="scennav" class="scroll" href="#parallax2">Scenes</a></li>
        <li><a id="montnav" class="scroll" href="#parallax3">Montage</a></li>
        <li><a id="celenav" class="scroll" href="#parallax4">Celebrities</a></li>
        <li><a id="modenav" class="scroll" href="#parallax5">Mode</a></li>
        <li><a id="portnav" class="scroll" href="#parallax6">Other Portraits</a></li>
        <li><a id="objenav" class="scroll" href="#parallax7">Objects</a></li>
        <li><a id="miscnav" class="scroll" href="#parallax8">Miscellaneous</a></li>
        <li><a id="contnav" class="scroll" href="#contact">Contact</a></li>
        <li><a id="morenav" class="scroll" href="#more">Links & More</a></li>
        </ul>
    </div>
</nav>

<section id="parallax1">
    <h1>Sensuality</h1>
</section>

高亮的JS（在index.html的正文部分）

<script>
var main = main = $('#mainnav div ul');

$('.scroll').click(function(event) {

    event.preventDefault();

    var full_url = this.href,
        parts = full_url.split('#'),
        trgt = parts[1],
        target_offset = $('#'+trgt).offset(),
        target_top = target_offset.top;

    $('html, body').animate({scrollTop:target_top}, 500);

    /* Remove active class on any li when an anchor is clicked */

    $('#mainnav div ul').children().removeClass();

    /* Add active class to clicked anchor's parent li */

    $(this).parent().addClass('active');

});
</script>

CSS

nav {
width: 100%;
height: 50px;
position: relative;
z-index: 1000;
background: rgba(26,30,39,0.7);
opacity: 0;
filter: alpha(opacity=0);
}

nav .container {
width: 96%;
}

.links {
height: 50px;
display: table-cell;
vertical-align: middle;
}

.links li {
height: 50px;
display: inline;
margin: 0 15px 0 0;
padding: 2px;
}

.links a {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 20px;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
}

.links a:visited {
color: #ffffff;
}

.links a:hover {
color: #b0b825;
}

.links a.current {
color: ffd200;
}

nav#mainnav li.active a { 
color: #ffd200; 
}

你可以在这里看到它：http://photography.igorlaszlo.com

请准确说明我必须做什么，我不是 javascript 专业人士...

提前致谢！

Answer 1

试试这个我对你的代码做了一些修改

$(document).ready(function(){
 $("#top1").parent().addClass('active');
var main = main = $('#main ul');

$('.scroll').click(function(event) {

    event.preventDefault();

    var full_url = this.href,
        parts = full_url.split('#'),
        trgt = parts[1],
        target_offset = $('#'+trgt).offset(),
        target_top = target_offset.top;

    $('html, body').animate({scrollTop:target_top}, 500);

    /* Remove active class on any li when an anchor is clicked */

    main.children().removeClass();

    /* Add active class to clicked anchor's parent li */

    $(this).parent().addClass('active');

});

    $(window).scroll(function(event) {
   if($("#top").offset().top < $(window).scrollTop() + $(window).outerHeight()) {
 $("#top1").parent().addClass('active'); 
$("#middle1").parent().removeClass('active'); 
 $("#bottom1").parent().removeClass('active');        
} 
 if($("#middle").offset().top < $(window).scrollTop() + $(window).outerHeight()){
$("#middle1").parent().addClass('active'); 
$("#top1").parent().removeClass('active'); 
 $("#bottom1").parent().removeClass('active'); 
}
 if($("#bottom").offset().top < $(window).scrollTop() + $(window).outerHeight()){
$("#bottom1").parent().addClass('active'); 
  $("#top1").parent().removeClass('active'); 
 $("#middle1").parent().removeClass('active'); 
}       
});
});

并在您的 Html 中通过添加 id 属性对以下标签进行了一些更改

        <li><a href="#top" class="scroll" id="top1"></a></li>
        <li><a href="#middle" class="scroll" id="middle1"></a></li>
        <li><a href="#bottom" class="scroll" id="bottom1"></a></li>

这是工作的 jsfiddle Demo

希望对您有所帮助，谢谢。

Answer 2

我给自己一个答案，也许有人也会使用它......最后我找到了一个解决方案，其中包括：1）平滑滚动到锚标签（一个页面网站），2）导航上的突出显示活动按钮和 3） highlight 也适用于鼠标滚轮滚动！

您可以在这里找到教程：http://trevordavis.net/blog/jquery-one-page-navigation-plugin 和我的网页上的演示：http://photography.igorlaszlo.com