jquery - jQuery ウェイポイントとメニュー項目

Question

Web サイトでウェイポイントを使用しているときに、適切なメニュー項目を強調表示するのに問題があります (または、ウェイポイントをトリガーするのがまったくわかりません)。私のコンテンツの 2 番目のセクション (#work) は正常に機能しますが、最初と 3 番目のセクション (#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>

Jクエリ:

$('#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");
})

前もって感謝します！