jquery - 滚动时触发导航

Question

我正在尝试根据用户当前滚动的部分修改我的导航链接。

我有以下 HTML

<div class="navigation">
    <a href="#resume">Resume</a>
    <a href="#design">Design</a>
    <a href="#" class="contact">Contact</a>
</div>

和以下结构

<section id="resume">my content</section>
<section id="design">....

为了达到效果，我使用了此处介绍的教程，该教程非常适合平滑滚动，但不会向我的导航链接添加任何类。

你能帮助理解为什么吗？

非常感谢，朱利安

Answer 1

一个插件来最小化你的工作怎么样？ http://scrollnav.com/ =)

Answer 2

你可以使用这个：

CSS

.navigation { position:fixed; top:0; left:0; width:100%; background-color:#88f; }
.navigation a { margin:2em; color:white; text-decoration:none; }
.navigation a.active {text-decoration:underline; color:red;}
#resume { margin-top:50px; }
section { margin:2em; height:500px; background-color:#eee; }

jQuery

$(function(){
    var links = $('.navigation>a'); //.not('.contact');
    var sections = $('section');
    links.click(function(e){
        e.preventDefault();
        var p = $(this.getAttribute('href')).position().top;
        $("html, body").stop().animate( { scrollTop: (p-30)+'px' }, 500);
    });
    $(window).on('scroll', function(e){
        var i=0;
        sections.each(function(j){
            var br = this.getBoundingClientRect();
            if (br.top<150) { // distance from the top of screen
                i = j;
            }
        });
        var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
        if (scrollBottom < 40) { // highlight the last section
            i = sections.length-1;
        }
        links.removeClass('active');
        var active = sections.eq(i).attr('id');
        links.filter('[href="#'+active+'"]').addClass('active');
    }).trigger('scroll');
});

JSFiddle： http: //jsfiddle.net/GRcjc/3/ http://jsfiddle.net/GRcjc/3/show