jQuery Waypoints和菜单项

Question

我在网站上使用Waypoint时突出显示正确的菜单项有问题（或根本没有触发航点，我无法分辨）。我的内容的第二部分（#work）工作正常，但第一部分和第三部分没有（#about和#contact）。我的jquery技能不好，所以我需要一些帮助！

HTML：

<nav>
    <ul class="nav nav-pills">
        <li class="active"><a href="#about">ABOUT</a></li>
        <li><a href="#work">WORK</a></li>
        <li><a href="#contact">CONTACT</a></li>
    </ul>
</nav>
<section id="about">..</section>
<section id="work">...</section>
<section id="contact">...</section>

JQUERY：

$('#about').waypoint(function() {
    $('.nav .active').removeClass("active");
    $('.nav li:nth-child(1)').addClass("active");
})
$('#work').waypoint(function() {
    $('.nav .active').removeClass("active");
    $('.nav li:nth-child(2)').addClass("active");
})
$('#contact').waypoint(function() {
    $('.nav .active').removeClass("active");
    $('.nav li:nth-child(3)').addClass("active");
})

提前致谢！